<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>闲鱼自动回复管理系统</title>
  <link rel="stylesheet" href="/static/lib/bootstrap/bootstrap.min.css">
  <link rel="stylesheet" href="/static/lib/bootstrap-icons/bootstrap-icons.css">
  
  <link rel="stylesheet" href="/static/css/app.css">
</head>
<body>
  <!-- 侧边栏 -->
  <div class="sidebar" id="sidebar">
    <div class="sidebar-header">
      <a href="#" class="sidebar-brand">
        <i class="bi bi-layers-fill"></i>
        聚合云·闲鱼管理系统
      </a>
    </div>
    <nav class="sidebar-nav">
      <div class="nav-item">
        <a href="#" class="nav-link active" onclick="showSection('dashboard')">
          <i class="bi bi-speedometer2"></i>
          仪表盘
        </a>
      </div>
      <div class="nav-item">
        <a href="#" class="nav-link" onclick="showSection('accounts')">
          <i class="bi bi-person-circle"></i>
          账号管理
        </a>
      </div>
      <div class="nav-item">
        <a href="#" class="nav-link" onclick="showSection('items')">
          <i class="bi bi-box-seam"></i>
          商品管理
        </a>
      </div>
      <div class="nav-item">
        <a href="#" class="nav-link" onclick="showSection('orders')">
          <i class="bi bi-receipt"></i>
          订单管理
        </a>
      </div>
      <div class="nav-item">
        <a href="#" class="nav-link" onclick="showSection('auto-reply')">
          <i class="bi bi-chat-left-text"></i>
          自动回复
        </a>
      </div>
      <div class="nav-item">
        <a href="#" class="nav-link" onclick="showSection('keyword-library')">
          <i class="bi bi-collection"></i>
          门店词库
        </a>
      </div>
      <div class="nav-item">
        <a href="#" class="nav-link" onclick="showSection('global-keywords')">
          <i class="bi bi-globe"></i>
          通用词库
        </a>
      </div>
      <div class="nav-item">
        <a href="#" class="nav-link" onclick="showSection('cards')">
          <i class="bi bi-credit-card"></i>
          卡种管理
        </a>
      </div>
      <div class="nav-item">
        <a href="#" class="nav-link" onclick="showSection('auto-delivery')">
          <i class="bi bi-truck"></i>
          自动发货
        </a>
      </div>
      <div class="nav-item">
        <a href="#" class="nav-link" onclick="showSection('notification-channels')">
          <i class="bi bi-bell"></i>
          通知渠道
        </a>
      </div>
      <div class="nav-item">
        <a href="#" class="nav-link" onclick="showSection('message-notifications')">
          <i class="bi bi-chat-dots"></i>
          消息通知
        </a>
      </div>
      <div class="nav-item">
        <a href="#" class="nav-link" onclick="showSection('system-settings')">
          <i class="bi bi-gear"></i>
          系统设置
        </a>
      </div>
      <div class="nav-item">
        <a href="#" class="nav-link" onclick="showSection('personal-info')">
          <i class="bi bi-person"></i>
          个人信息
        </a>
      </div>

      <!-- 管理员专用菜单 -->
      <div id="adminMenuSection" style="display: none;">
        <div class="nav-divider mt-3 mb-2">
          <small class="text-white-50">管理员功能</small>
        </div>
        <div class="nav-item">
          <a href="/user_management.html" class="nav-link" target="_blank">
            <i class="bi bi-people"></i>
            用户管理
          </a>
        </div>
        <div class="nav-item">
          <a href="/log_management.html" class="nav-link" target="_blank">
            <i class="bi bi-file-text-fill"></i>
            系统日志
          </a>
        </div>
        <div class="nav-item">
          <a href="/data_management.html" class="nav-link" target="_blank">
            <i class="bi bi-database"></i>
            数据管理
          </a>
        </div>
      </div>

      <div class="nav-item">
        <a href="#" class="nav-link" onclick="showSection('about')">
          <i class="bi bi-info-circle"></i>
          关于
        </a>
      </div>

      <!-- 底部分隔符 -->
      <div class="nav-divider mt-3 mb-2">
        <small class="text-white-50">系统操作</small>
      </div>
      <div class="nav-item">
        <a href="#" class="nav-link" onclick="logout()">
          <i class="bi bi-box-arrow-right"></i>
          登出
        </a>
      </div>
    </nav>
  </div>

  <!-- 主内容区域 -->
  <div class="main-content">
    <!-- 仪表盘内容 -->
    <div id="dashboard-section" class="content-section active">
      <div class="content-header">
        <h2 class="mb-0">
          <i class="bi bi-speedometer2 me-2"></i>
          仪表盘
        </h2>
        <p class="text-muted mb-0">系统概览和统计信息</p>
      </div>
      <div class="content-body">
        <div class="dashboard-stats">
          <div class="stat-card">
            <div class="stat-icon primary">
              <i class="bi bi-person-circle"></i>
            </div>
            <div class="stat-number" id="totalAccounts">0</div>
            <div class="stat-label">总账号数</div>
          </div>

          <div class="stat-card">
            <div class="stat-icon warning">
              <i class="bi bi-activity"></i>
            </div>
            <div class="stat-number" id="activeAccounts">0</div>
            <div class="stat-label">启用账号数</div>
          </div>
        </div>

        <!-- 账号详情列表 -->
        <div class="card">
          <div class="card-header">
            <h5 class="mb-0">
              <i class="bi bi-list-ul me-2"></i>
              账号详情
            </h5>
          </div>
          <div class="card-body p-0">
            <div class="table-responsive">
              <table class="table table-hover mb-0">
                <thead>
                  <tr>
                    <th>账号ID</th>
                    <th>关键词数量</th>
                    <th>状态</th>
                    <th>最后更新</th>
                  </tr>
                </thead>
                <tbody id="dashboardAccountsList">
                  <!-- 动态生成 -->
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 账号管理内容 -->
    <div id="accounts-section" class="content-section">
      <div class="content-header">
        <h2 class="mb-0">
          <i class="bi bi-person-circle me-2"></i>
          账号管理
        </h2>
        <p class="text-muted mb-0">管理闲鱼账号Cookie信息</p>
      </div>
      <div class="content-body">
        <!-- 添加Cookie卡片 -->
        <div class="card mb-4">
          <div class="card-header">
            <span><i class="bi bi-plus-circle me-2"></i>添加新账号</span>
          </div>
          <div class="card-body">
            <!-- 添加方式选择 -->
            <div class="row mb-4">
              <div class="col-12">
                <div class="d-grid gap-2 d-md-flex justify-content-md-center">
                  <button type="button" class="btn btn-success btn-lg me-md-2 flex-fill qr-login-btn" onclick="showQRCodeLogin()" style="max-width: 300px;">
                    <i class="bi bi-qr-code me-2"></i>
                    <span class="fw-bold">扫码登录</span>
                    <br>
                    <small class="opacity-75">推荐方式，安全便捷</small>
                  </button>
                  <button type="button" class="btn btn-outline-secondary btn-lg flex-fill manual-input-btn" onclick="toggleManualInput()" style="max-width: 300px;">
                    <i class="bi bi-keyboard me-2"></i>
                    <span class="fw-bold">手动输入</span>
                    <br>
                    <small class="opacity-75">输入Cookie信息</small>
                  </button>
                </div>
              </div>
            </div>

            <!-- 手动输入表单（默认隐藏） -->
            <div id="manualInputForm" style="display: none;">
              <div class="alert alert-info">
                <i class="bi bi-info-circle me-2"></i>
                <strong>提示：</strong>推荐使用扫码登录，更加安全便捷。如需手动输入，请确保Cookie信息的准确性。
              </div>
              <form id="addForm" class="row g-3">
                <div class="col-md-3">
                  <label for="cookieId" class="form-label">账号ID</label>
                  <input type="text" class="form-control" id="cookieId" placeholder="唯一标识" required>
                </div>
                <div class="col-md-9">
                  <label for="cookieValue" class="form-label">Cookie值</label>
                  <input type="text" class="form-control" id="cookieValue" placeholder="完整Cookie字符串" required>
                </div>
                <div class="col-12">
                  <button type="submit" class="btn btn-primary">
                    <i class="bi bi-plus-lg me-1"></i>添加账号
                  </button>
                  <button type="button" class="btn btn-secondary ms-2" onclick="toggleManualInput()">
                    <i class="bi bi-x-circle me-1"></i>取消
                  </button>
                </div>
              </form>
            </div>
          </div>
        </div>

        <!-- Cookie列表卡片 -->
        <div class="card">
          <div class="card-header d-flex justify-content-between align-items-center">
            <span><i class="bi bi-list-ul me-2"></i>账号列表</span>
            <div class="btn-group">
              <button class="btn btn-sm btn-outline-success" onclick="openDefaultReplyManager()">
                <i class="bi bi-chat-text me-1"></i>默认回复管理
              </button>
              <button class="btn btn-sm btn-outline-primary" onclick="loadCookies()">
                <i class="bi bi-arrow-clockwise me-1"></i>刷新
              </button>
            </div>
          </div>
          <div class="card-body p-0">
            <div class="table-responsive">
              <table class="table table-hover" id="cookieTable">
                <thead>
                  <tr>
                    <th style="width: 6%">账号ID</th>
                    <th style="width: 9%">Cookie值</th>
                    <th style="width: 4%">状态</th>
                    <th style="width: 5%">Token状态</th>
                    <th style="width: 5%">默认回复</th>
                    <th style="width: 5%">AI回复</th>
                    <th style="width: 6%">自动确认发货</th>
                    <th style="width: 7%">备注</th>
                    <th style="width: 8%">
                      通知wxid
                      <i class="bi bi-question-circle ms-1"
                         data-bs-toggle="tooltip"
                         data-bs-placement="top"
                         title="设置专属的微信ID，通知时优先发送到此微信而不是群聊。留空则使用群通知。"></i>
                    </th>
                    <th style="width: 6%">
                      暂停时间
                      <i class="bi bi-question-circle ms-1"
                         data-bs-toggle="tooltip"
                         data-bs-placement="top"
                         title="检测到手动发出消息后，自动回复暂停的时间长度（分钟）。如果在暂停期间再次手动发出消息，会重新开始计时。"></i>
                    </th>
                    <th style="width: 5%">
                      暂停开关
                      <i class="bi bi-question-circle ms-1"
                         data-bs-toggle="tooltip"
                         data-bs-placement="top"
                         title="控制是否启用自动回复暂停功能。关闭后手动发消息不会暂停自动回复。"></i>
                    </th>
                    <th style="width: 14%">操作</th>
                  </tr>
                </thead>
                <tbody></tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 商品管理内容 -->
    <div id="items-section" class="content-section">
      <div class="content-header">
        <h2 class="mb-0">
          <i class="bi bi-box-seam me-2"></i>
          商品管理
        </h2>
        <p class="text-muted mb-0">管理各账号的商品信息</p>
      </div>

      <div class="content-body">
        <!-- 筛选和搜索 -->
        <div class="card mb-4">
          <div class="card-body">
            <div class="row align-items-end mb-3">
              <div class="col-md-6">
                <label for="itemCookieFilter" class="form-label">筛选账号</label>
                <select class="form-select" id="itemCookieFilter" onchange="loadItemsByCookie()">
                  <option value="">所有账号</option>
                </select>
              </div>

              <div class="col-md-6">
                <div class="d-flex justify-content-end align-items-end gap-2">
                  <!-- 页码输入 -->
                  <div class="d-flex align-items-center gap-2">
                    <label for="pageNumber" class="form-label mb-0 text-nowrap">页码:</label>
                    <input type="number" class="form-control" id="pageNumber" placeholder="页码" min="1" value="1" style="width: 80px;">
                  </div>
                  <div class="d-flex gap-2">
                    <button class="btn btn-success" onclick="getAllItemsFromAccount()">
                      <i class="bi bi-download me-1"></i>获取指定页
                    </button>
                    <button class="btn btn-warning" onclick="getAllItemsFromAccountAll()">
                      <i class="bi bi-collection me-1"></i>获取所有页
                    </button>
                    <button class="btn btn-primary" onclick="refreshItems()">
                      <i class="bi bi-arrow-clockwise me-1"></i>刷新
                    </button>
                  </div>
                </div>
              </div>
            </div>

            <!-- 搜索结果统计 -->
            <div id="itemSearchStats" class="text-muted small" style="display: none;">
              <i class="bi bi-search me-1"></i>
              <span id="itemSearchStatsText"></span>
            </div>
          </div>
        </div>

        <!-- 商品列表 -->
        <div class="card">
          <div class="card-header d-flex justify-content-between align-items-center">
            <div class="d-flex align-items-center gap-3">
              <input type="text" class="form-control" id="itemSearchInput"
                     placeholder="搜索商品标题或详情..." style="width: 300px;">
              <h5 class="mb-0">商品列表(自动发货根据商品标题和商品详情匹配关键字)</h5>
            </div>
            <button class="btn btn-sm btn-outline-danger" onclick="batchDeleteItems()" id="batchDeleteBtn" disabled>
              <i class="bi bi-trash"></i> 批量删除
            </button>
          </div>
          <div class="card-body">
            <!-- 搜索统计信息 -->
            <div id="itemSearchStats" class="text-muted small mb-2" style="display: none;">
              <i class="bi bi-search me-1"></i>
              <span id="itemSearchStatsText"></span>
            </div>
            <div class="table-responsive">
              <table class="table table-hover">
                <thead>
                  <tr>
                    <th style="width: 5%">
                      <input type="checkbox" id="selectAllItems" onchange="toggleSelectAll(this)">
                    </th>
                    <th style="width: 12%">账号ID</th>
                    <th style="width: 12%">商品ID</th>
                    <th style="width: 18%">商品标题</th>
                    <th style="width: 20%">商品详情</th>
                    <th style="width: 8%">多规格</th>
                    <th style="width: 10%">更新时间</th>
                    <th style="width: 15%">操作</th>
                  </tr>
                </thead>
                <tbody id="itemsTableBody">
                  <tr>
                    <td colspan="8" class="text-center text-muted">加载中...</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>

          <!-- 分页控件 -->
          <div class="card-footer" id="itemsPagination">
            <div class="d-flex justify-content-between align-items-center">
              <div class="text-muted small">
                <span id="itemsPageInfo">显示第 1-10 条，共 0 条记录</span>
              </div>
              <div class="d-flex align-items-center gap-2">
                <div class="btn-group" role="group">
                  <button type="button" class="btn btn-outline-secondary btn-sm" id="itemsFirstPage" onclick="goToItemsPage(1)" disabled>
                    <i class="bi bi-chevron-double-left"></i>
                  </button>
                  <button type="button" class="btn btn-outline-secondary btn-sm" id="itemsPrevPage" onclick="goToItemsPage(currentItemsPage - 1)" disabled>
                    <i class="bi bi-chevron-left"></i>
                  </button>
                </div>

                <div class="d-flex align-items-center gap-2 mx-2">
                  <span class="text-muted small">第</span>
                  <input type="number" class="form-control form-control-sm" id="itemsPageInput"
                         style="width: 60px;" min="1" value="1">
                  <span class="text-muted small">页，共 <span id="itemsTotalPages">0</span> 页</span>
                </div>

                <div class="btn-group" role="group">
                  <button type="button" class="btn btn-outline-secondary btn-sm" id="itemsNextPage" onclick="goToItemsPage(currentItemsPage + 1)" disabled>
                    <i class="bi bi-chevron-right"></i>
                  </button>
                  <button type="button" class="btn btn-outline-secondary btn-sm" id="itemsLastPage" onclick="goToItemsPage(totalItemsPages)" disabled>
                    <i class="bi bi-chevron-double-right"></i>
                  </button>
                </div>

                <select class="form-select form-select-sm ms-2" id="itemsPageSize" style="width: auto;">
                  <option value="10">10条/页</option>
                  <option value="20" selected>20条/页</option>
                  <option value="50">50条/页</option>
                  <option value="100">100条/页</option>
                </select>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 订单管理内容 -->
    <div id="orders-section" class="content-section">
      <div class="content-header">
        <h2 class="mb-0">
          <i class="bi bi-receipt me-2"></i>
          订单管理
        </h2>
        <p class="text-muted mb-0">管理各账号的订单信息，支持查看、搜索和状态筛选</p>
        <div class="alert alert-info mt-2 py-2">
          <i class="bi bi-info-circle me-2"></i>
          <strong>功能说明：</strong>
          <span class="small">系统可自动解析闲鱼订单消息、支持手动管理、状态跟踪及多条件搜索筛选。点击"测试解析"按钮可测试消息解析功能。</span>
        </div>
      </div>

      <div class="content-body">
        <!-- 订单统计卡片 - 优化为更紧凑的布局 -->
        <div class="row mb-3">
          <div class="col-xl-3 col-md-6 mb-2">
            <div class="card border-0" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);">
              <div class="card-body text-center py-3">
                <div class="d-flex align-items-center justify-content-center mb-2">
                  <i class="bi bi-receipt fs-4 me-2"></i>
                  <h4 class="mb-0" id="totalOrders">0</h4>
                </div>
                <p class="mb-0 small opacity-90">总订单数</p>
              </div>
            </div>
          </div>
          <div class="col-xl-3 col-md-6 mb-2">
            <div class="card border-0" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); color: white; box-shadow: 0 4px 15px rgba(240, 147, 251, 0.4);">
              <div class="card-body text-center py-3">
                <div class="d-flex align-items-center justify-content-center mb-2">
                  <i class="bi bi-clock fs-4 me-2"></i>
                  <h4 class="mb-0" id="pendingOrders">0</h4>
                </div>
                <p class="mb-0 small opacity-90">待发货订单</p>
              </div>
            </div>
          </div>
          <div class="col-xl-3 col-md-6 mb-2">
            <div class="card border-0" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); color: white; box-shadow: 0 4px 15px rgba(79, 172, 254, 0.4);">
              <div class="card-body text-center py-3">
                <div class="d-flex align-items-center justify-content-center mb-2">
                  <i class="bi bi-truck fs-4 me-2"></i>
                  <h4 class="mb-0" id="shippedOrders">0</h4>
                </div>
                <p class="mb-0 small opacity-90">已发货订单</p>
              </div>
            </div>
          </div>
          <div class="col-xl-3 col-md-6 mb-2">
            <div class="card border-0" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); color: white; box-shadow: 0 4px 15px rgba(67, 233, 123, 0.4);">
              <div class="card-body text-center py-3">
                <div class="d-flex align-items-center justify-content-center mb-2">
                  <i class="bi bi-currency-dollar fs-4 me-2"></i>
                  <h4 class="mb-0" id="monthAmount">¥0</h4>
                </div>
                <p class="mb-0 small opacity-90">本月交易额</p>
              </div>
            </div>
          </div>
        </div>

        <!-- 筛选和搜索 -->
        <div class="card mb-4">
          <div class="card-body">
            <div class="row align-items-end mb-3">
              <div class="col-md-3">
                <label for="orderCookieFilter" class="form-label">筛选账号</label>
                <select class="form-select" id="orderCookieFilter" onchange="loadOrders()">
                  <option value="">所有账号</option>
                </select>
              </div>
              <div class="col-md-3">
                <label for="orderStatusFilter" class="form-label">订单状态</label>
                <select class="form-select" id="orderStatusFilter" onchange="loadOrders()">
                  <option value="">所有状态</option>
                  <option value="待付款">待付款</option>
                  <option value="待发货">待发货</option>
                  <option value="已发货">已发货</option>
                  <option value="已完成">已完成</option>
                  <option value="退款中">退款中</option>
                  <option value="已退款">已退款</option>
                  <option value="已取消">已取消</option>
                </select>
              </div>
              <div class="col-md-3">
                <label for="orderSearchInput" class="form-label">搜索订单</label>
                <div class="input-group">
                  <select class="form-select" id="orderSearchType" style="max-width: 120px;">
                    <option value="all">全部</option>
                    <option value="order_id">订单号</option>
                    <option value="buyer_name">买家名称</option>
                    <option value="buyer_id">买家ID</option>
                    <option value="item_title">商品标题</option>
                    <option value="coupon_code">券码</option>
                  </select>
                  <input type="text" class="form-control" id="orderSearchInput" placeholder="输入搜索关键词...">
                </div>
              </div>
              <div class="col-md-2">
                <div class="d-flex gap-2">
                  <button class="btn btn-primary" onclick="searchOrders()">
                    <i class="bi bi-search me-1"></i>搜索
                  </button>
                  <button class="btn btn-outline-secondary" onclick="clearOrderSearch()">
                    <i class="bi bi-x-circle me-1"></i>清除
                  </button>
                </div>
              </div>
            </div>

            <!-- 搜索结果统计 -->
            <div id="orderSearchStats" class="text-muted small" style="display: none;">
              <i class="bi bi-search me-1"></i>
              <span id="orderSearchStatsText"></span>
            </div>
          </div>
        </div>

        <!-- 订单列表 -->
        <div class="card">
          <div class="card-header d-flex justify-content-between align-items-center">
            <div class="d-flex align-items-center gap-3">
              <h5 class="mb-0">订单列表</h5>
              <span class="badge bg-info">
                <i class="bi bi-info-circle me-1"></i>仅显示已触发自动发货的订单
              </span>
            </div>
            <div class="d-flex gap-2">
                             <button class="btn btn-sm btn-outline-success" onclick="addOrderManually()">
                 <i class="bi bi-plus-circle me-1"></i>手动添加
               </button>
               <button class="btn btn-sm btn-outline-info" onclick="testOrderParsing()">
                 <i class="bi bi-code-square me-1"></i>测试解析
               </button>
               <button class="btn btn-sm btn-outline-primary" onclick="refreshOrders()">
                 <i class="bi bi-arrow-clockwise me-1"></i>刷新
               </button>
            </div>
          </div>
          <div class="card-body">
            <div class="table-responsive">
              <table class="table table-hover">
                <thead>
                  <tr>
                    <th style="width: 15%">订单号</th>
                    <th style="width: 8%">账号ID</th>
                    <th style="width: 8%">买家名称</th>
                    <th style="width: 12%">规格信息</th>
                    <th style="width: 6%">数量</th>
                    <th style="width: 8%">金额</th>
                    <th style="width: 8%">订单状态</th>
                    <th style="width: 15%">自动发货券码信息</th>
                    <th style="width: 10%">更新时间</th>
                    <th style="width: 10%">操作</th>
                  </tr>
                </thead>
                <tbody id="ordersTableBody">
                  <tr>
                    <td colspan="10" class="text-center text-muted">加载中...</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>

          <!-- 分页控件 -->
          <div class="card-footer" id="ordersPagination">
            <div class="d-flex justify-content-between align-items-center">
              <div class="text-muted small">
                <span id="ordersPageInfo">显示第 1-20 条，共 0 条记录</span>
              </div>
              <div class="d-flex align-items-center gap-2">
                <div class="btn-group" role="group">
                  <button type="button" class="btn btn-outline-secondary btn-sm" id="ordersFirstPage" onclick="goToOrdersPage(1)" disabled>
                    <i class="bi bi-chevron-double-left"></i>
                  </button>
                  <button type="button" class="btn btn-outline-secondary btn-sm" id="ordersPrevPage" onclick="goToOrdersPage(currentOrdersPage - 1)" disabled>
                    <i class="bi bi-chevron-left"></i>
                  </button>
                </div>

                <div class="d-flex align-items-center gap-2 mx-2">
                  <span class="text-muted small">第</span>
                  <input type="number" class="form-control form-control-sm" id="ordersPageInput"
                         style="width: 60px;" min="1" value="1">
                  <span class="text-muted small">页，共 <span id="ordersTotalPages">0</span> 页</span>
                </div>

                <div class="btn-group" role="group">
                  <button type="button" class="btn btn-outline-secondary btn-sm" id="ordersNextPage" onclick="goToOrdersPage(currentOrdersPage + 1)" disabled>
                    <i class="bi bi-chevron-right"></i>
                  </button>
                  <button type="button" class="btn btn-outline-secondary btn-sm" id="ordersLastPage" onclick="goToOrdersPage(totalOrdersPages)" disabled>
                    <i class="bi bi-chevron-double-right"></i>
                  </button>
                </div>

                <select class="form-select form-select-sm ms-2" id="ordersPageSize" style="width: auto;" onchange="loadOrders()">
                  <option value="10">10条/页</option>
                  <option value="20" selected>20条/页</option>
                  <option value="50">50条/页</option>
                  <option value="100">100条/页</option>
                </select>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 自动回复内容 -->
    <div id="auto-reply-section" class="content-section">
      <div class="content-header">
        <h2 class="mb-0">
          <i class="bi bi-chat-left-text me-2"></i>
          自动回复
        </h2>
        <p class="text-muted mb-0">设置账号的自动回复功能</p>
      </div>
      <div class="content-body">
        <!-- 现代化账号选择器 -->
        <div class="account-selector">
          <div class="selector-header">
            <div class="selector-icon">
              <i class="bi bi-person-circle"></i>
            </div>
            <div>
              <h3 class="selector-title">选择账号</h3>
              <p class="selector-subtitle">选择要配置自动回复的闲鱼账号</p>
            </div>
          </div>
          <div class="row g-3 align-items-end">
            <div class="col-md-8">
              <div class="account-select-wrapper">
                <select class="account-select" id="accountSelect" onchange="loadAccountKeywords()">
                  <option value="">🔍 请选择一个账号开始配置...</option>
                </select>
              </div>
            </div>
            <div class="col-md-4">
              <button class="btn btn-primary w-100 d-flex align-items-center justify-content-center" onclick="refreshAccountList()" style="padding: 1rem 1.25rem; height: auto;">
                <i class="bi bi-arrow-clockwise me-2"></i>
                <span>刷新列表</span>
              </button>
            </div>
          </div>
        </div>

        <!-- 现代化关键词管理容器 -->
        <div class="keyword-container" id="keywordManagement" style="display: none;">
          <div class="keyword-header">
            <h3 id="keywordManagementTitle">
              <i class="bi bi-chat-dots me-2"></i>
              自动回复管理
            </h3>
            <div class="d-flex align-items-center gap-2">
              <div class="account-badge" id="currentAccountBadge">
                <!-- 动态显示当前账号 -->
              </div>
              <div class="btn-group" role="group">
                <button class="btn btn-outline-success btn-sm" onclick="exportKeywords()" title="导出回复设置">
                  <i class="bi bi-download"></i> 导出
                </button>
              </div>
            </div>
          </div>

          <!-- 添加回复区域 -->
          <div class="keyword-input-area">
            <div class="keyword-input-group">
              <div class="input-field">
                <label>触发词</label>
                <input type="text" id="newKeyword" placeholder="例如：你好">
              </div>
              <div class="input-field">
                <label>自动回复内容</label>
                <input type="text" id="newReply" placeholder="例如：您好，欢迎咨询！有什么可以帮助您的吗？">
              </div>
              <div class="input-field">
                <label>商品ID（可选）</label>
                <select id="newItemIdSelect" class="form-select">
                  <option value="">选择商品或留空表示通用回复</option>
                </select>
              </div>
              <button class="add-btn" onclick="addKeyword()">
                <i class="bi bi-plus-lg"></i>
                添加文本回复
              </button>
              <button class="add-btn btn-image" onclick="showAddImageKeywordModal()">
                <i class="bi bi-image"></i>
                添加图片回复
              </button>
            </div>
            <div class="mt-3">
              <small class="text-muted">
                <i class="bi bi-lightbulb me-1"></i>
                <strong>支持变量：</strong>
                <code>{send_user_name}</code> 用户昵称，
                <code>{send_user_id}</code> 用户ID，
                <code>{send_message}</code> 用户消息
              </small>
            </div>
          </div>

          <!-- 搜索区域 -->
          <div class="keyword-search-area">
            <div class="search-input-group">
              <div class="input-field">
                <label>搜索回复</label>
                <input type="text" id="searchKeyword" placeholder="输入触发词或商品ID进行搜索...">
              </div>
              <button class="add-btn search-btn" onclick="searchKeywords()" title="搜索回复">
                <i class="bi bi-search"></i>
                搜索
              </button>
              <button class="add-btn clear-search-btn" onclick="clearSearch()" title="清除搜索">
                <i class="bi bi-x-lg"></i>
                清除
              </button>
            </div>
            <div class="search-results-info" id="searchResultsInfo" style="display: none;">
              <small class="text-muted">
                <i class="bi bi-info-circle me-1"></i>
                <span id="searchResultsText">显示结果</span>
              </small>
            </div>
          </div>

          <!-- 回复列表 -->
          <div class="keywords-list" id="keywordsList">
            <!-- 动态生成的回复列表 -->
          </div>

          <!-- 分页控件 -->
          <div class="keywords-pagination" id="keywordsPagination" style="display: none;">
            <nav aria-label="回复分页">
              <ul class="pagination justify-content-center">
                <li class="page-item" id="prevPageItem">
                  <a class="page-link" href="#" onclick="loadKeywordsPage(currentKeywordsPage - 1)">
                    <i class="bi bi-chevron-left"></i> 上一页
                  </a>
                </li>
                <li class="page-item active" id="currentPageItem">
                  <span class="page-link" id="currentPageText">1</span>
                </li>
                <li class="page-item" id="nextPageItem">
                  <a class="page-link" href="#" onclick="loadKeywordsPage(currentKeywordsPage + 1)">
                    下一页 <i class="bi bi-chevron-right"></i>
                  </a>
                </li>
              </ul>
            </nav>
            <div class="pagination-info text-center mt-2">
              <small class="text-muted" id="keywordsPaginationInfo">
                显示第 1-50 项，共 0 项回复
              </small>
            </div>
          </div>

          <!-- 商品ID列表 -->
          <div class="item-ids-container" id="itemIdsContainer" style="display: none;">
            <div class="item-ids-header">
              <h4>
                <i class="bi bi-box-seam me-2"></i>
                已配置自动回复的商品
              </h4>
              <div class="item-ids-stats">
                <span id="itemIdsCount" class="badge bg-primary">0 个商品</span>
              </div>
            </div>
            <div class="item-ids-content">
              <div class="item-ids-grid" id="itemIdsGrid">
                <!-- 动态生成的商品ID卡片 -->
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 卡种管理内容 -->
    <div id="cards-section" class="content-section">
      <div class="content-header">
        <h2 class="mb-0">
          <i class="bi bi-credit-card me-2"></i>
          卡种管理
        </h2>
        <p class="text-muted mb-0">管理虚拟商品的卡券数据，支持API、固定文字和批量数据</p>
      </div>
      <div class="content-body">
        <!-- 卡券列表 -->
        <div class="row">
          <div class="col-md-8">
            <div class="card">
              <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0">卡券列表</h5>
                <button class="btn btn-primary btn-sm" onclick="showAddCardModal()">
                  <i class="bi bi-plus-lg me-1"></i>添加卡券
                </button>
              </div>
              <div class="card-body">
                <div class="table-responsive">
                  <table class="table table-hover">
                    <thead>
                      <tr>
                        <th>卡券名称</th>
                        <th>类型</th>
                        <th>规格信息</th>
                        <th>数据量</th>
                        <th>延时时间</th>
                        <th>状态</th>
                        <th>创建时间</th>
                        <th>操作</th>
                      </tr>
                    </thead>
                    <tbody id="cardsTableBody">
                      <tr>
                        <td colspan="7" class="text-center py-4 text-muted">
                          <i class="bi bi-credit-card fs-1 d-block mb-3"></i>
                          <h5>暂无卡券数据</h5>
                          <p class="mb-0">点击"添加卡券"开始创建您的第一个卡券</p>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-4">
            <div class="card">
              <div class="card-header">
                <h5 class="mb-0">统计信息</h5>
              </div>
              <div class="card-body">
                <div class="stat-item mb-3">
                  <div class="d-flex justify-content-between">
                    <span>总卡券数</span>
                    <span class="badge bg-primary" id="totalCards">0</span>
                  </div>
                </div>
                <div class="stat-item mb-3">
                  <div class="d-flex justify-content-between">
                    <span>API类型</span>
                    <span class="badge bg-info" id="apiCards">0</span>
                  </div>
                </div>
                <div class="stat-item mb-3">
                  <div class="d-flex justify-content-between">
                    <span>固定文字</span>
                    <span class="badge bg-success" id="textCards">0</span>
                  </div>
                </div>
                <div class="stat-item">
                  <div class="d-flex justify-content-between">
                    <span>批量数据</span>
                    <span class="badge bg-warning" id="dataCards">0</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 自动发货内容 -->
    <div id="auto-delivery-section" class="content-section">
      <div class="content-header">
        <h2 class="mb-0">
          <i class="bi bi-truck me-2"></i>
          自动发货
        </h2>
        <p class="text-muted mb-0">根据商品ID自动匹配卡券进行发货</p>
      </div>
      <div class="content-body">
        <!-- 发货规则列表 -->
        <div class="row">
          <div class="col-md-8">
            <div class="card">
              <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0">发货规则</h5>
                <button class="btn btn-primary btn-sm" onclick="showAddDeliveryRuleModal()">
                  <i class="bi bi-plus-lg me-1"></i>添加规则
                </button>
              </div>
              <div class="card-body">
                <div class="table-responsive">
                  <table class="table table-hover">
                    <thead>
                      <tr>
                        <th>商品ID</th>
                        <th>匹配卡券</th>
                        <th>卡券类型</th>
                        <th>发货数量</th>
                        <th>状态</th>
                        <th>生成图片</th>
                        <th>已发货次数</th>
                        <th>操作</th>
                      </tr>
                    </thead>
                    <tbody id="deliveryRulesTableBody">
                      <tr>
                        <td colspan="8" class="text-center py-4 text-muted">
                          <i class="bi bi-truck fs-1 d-block mb-3"></i>
                          <h5>暂无发货规则</h5>
                          <p class="mb-0">点击"添加规则"开始配置自动发货规则</p>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-4">
            <div class="card">
              <div class="card-header">
                <h5 class="mb-0">发货统计</h5>
              </div>
              <div class="card-body">
                <div class="stat-item mb-3">
                  <div class="d-flex justify-content-between">
                    <span>总规则数</span>
                    <span class="badge bg-primary" id="totalRules">0</span>
                  </div>
                </div>
                <div class="stat-item mb-3">
                  <div class="d-flex justify-content-between">
                    <span>启用规则</span>
                    <span class="badge bg-success" id="activeRules">0</span>
                  </div>
                </div>
                <div class="stat-item mb-3">
                  <div class="d-flex justify-content-between">
                    <span>今日发货</span>
                    <span class="badge bg-info" id="todayDeliveries">0</span>
                  </div>
                </div>
                <div class="stat-item">
                  <div class="d-flex justify-content-between">
                    <span>总发货量</span>
                    <span class="badge bg-warning" id="totalDeliveries">0</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 通知渠道管理内容 -->
    <div id="notification-channels-section" class="content-section">
      <div class="content-header">
        <h2 class="mb-0">
          <i class="bi bi-bell me-2"></i>
          通知渠道管理
        </h2>
        <p class="text-muted mb-0">管理消息通知渠道，支持钉钉、邮件、Webhook等多种方式</p>
      </div>
      <div class="content-body">
        <!-- 通知渠道类型选择 -->
        <div class="card mb-4">
          <div class="card-header">
            <span><i class="bi bi-plus-circle me-2"></i>添加通知渠道</span>
          </div>
          <div class="card-body">
            <div class="alert alert-info mb-4">
              <i class="bi bi-info-circle me-2"></i>
              <strong>选择通知方式：</strong>点击下方按钮选择您要配置的通知渠道类型
            </div>

            <!-- 通知渠道类型按钮 -->
            <div class="row g-2">


              <div class="col-sm-6 col-md-4 col-lg-3 col-xl-2">
                <div class="card h-100 channel-type-card" onclick="showAddChannelModal('dingtalk')">
                  <div class="card-body text-center">
                    <div class="channel-icon">
                      <i class="bi bi-bell-fill text-info"></i>
                    </div>
                    <h6 class="card-title">钉钉通知</h6>
                    <p class="card-text text-muted">钉钉机器人消息</p>
                    <div class="mt-auto">
                      <button class="btn btn-outline-info btn-sm">
                        <i class="bi bi-plus-circle me-1"></i>配置
                      </button>
                    </div>
                  </div>
                </div>
              </div>

              <div class="col-sm-6 col-md-4 col-lg-3 col-xl-2">
                <div class="card h-100 channel-type-card" onclick="showAddChannelModal('email')">
                  <div class="card-body text-center">
                    <div class="channel-icon">
                      <i class="bi bi-envelope-fill text-success"></i>
                    </div>
                    <h6 class="card-title">邮件通知</h6>
                    <p class="card-text text-muted">SMTP邮件发送</p>
                    <div class="mt-auto">
                      <button class="btn btn-outline-success btn-sm">
                        <i class="bi bi-plus-circle me-1"></i>配置
                      </button>
                    </div>
                  </div>
                </div>
              </div>

              <div class="col-sm-6 col-md-4 col-lg-3 col-xl-2">
                <div class="card h-100 channel-type-card" onclick="showAddChannelModal('webhook')">
                  <div class="card-body text-center">
                    <div class="channel-icon">
                      <i class="bi bi-link-45deg text-warning"></i>
                    </div>
                    <h6 class="card-title">Webhook</h6>
                    <p class="card-text text-muted">自定义HTTP请求</p>
                    <div class="mt-auto">
                      <button class="btn btn-outline-warning btn-sm">
                        <i class="bi bi-plus-circle me-1"></i>配置
                      </button>
                    </div>
                  </div>
                </div>
              </div>

              <div class="col-sm-6 col-md-4 col-lg-3 col-xl-2">
                <div class="card h-100 channel-type-card" onclick="showAddChannelModal('wechat')">
                  <div class="card-body text-center">
                    <div class="channel-icon">
                      <i class="bi bi-wechat text-success"></i>
                    </div>
                    <h6 class="card-title">微信通知</h6>
                    <p class="card-text text-muted">企业微信机器人</p>
                    <div class="mt-auto">
                      <button class="btn btn-outline-success btn-sm">
                        <i class="bi bi-plus-circle me-1"></i>配置
                      </button>
                    </div>
                  </div>
                </div>
              </div>

              <div class="col-sm-6 col-md-4 col-lg-3 col-xl-2">
                <div class="card h-100 channel-type-card" onclick="showAddChannelModal('telegram')">
                  <div class="card-body text-center">
                    <div class="channel-icon">
                      <i class="bi bi-telegram text-primary"></i>
                    </div>
                    <h6 class="card-title">Telegram</h6>
                    <p class="card-text text-muted">Telegram机器人</p>
                    <div class="mt-auto">
                      <button class="btn btn-outline-primary btn-sm">
                        <i class="bi bi-plus-circle me-1"></i>配置
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 通知渠道列表 -->
        <div class="card">
          <div class="card-header d-flex justify-content-between align-items-center">
            <span><i class="bi bi-list-ul me-2"></i>通知渠道列表</span>
            <button class="btn btn-sm btn-outline-primary" onclick="loadNotificationChannels()">
              <i class="bi bi-arrow-clockwise me-1"></i>刷新
            </button>
          </div>
          <div class="card-body">
            <div class="table-responsive">
              <table class="table table-hover" id="channelsTable">
                <thead>
                  <tr>
                    <th style="width: 10%">ID</th>
                    <th style="width: 25%">名称</th>
                    <th style="width: 15%">类型</th>
                    <th style="width: 20%">配置</th>
                    <th style="width: 10%">状态</th>
                    <th style="width: 20%">操作</th>
                  </tr>
                </thead>
                <tbody id="channelsTableBody">
                  <!-- 动态生成 -->
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 消息通知配置内容 -->
    <div id="message-notifications-section" class="content-section">
      <div class="content-header">
        <h2 class="mb-0">
          <i class="bi bi-chat-dots me-2"></i>
          消息通知配置
        </h2>
        <p class="text-muted mb-0">为每个账号配置消息通知渠道</p>
      </div>
      <div class="content-body">
        <div class="card">
          <div class="card-header d-flex justify-content-between align-items-center">
            <span><i class="bi bi-gear me-2"></i>账号通知配置</span>
            <button class="btn btn-sm btn-outline-primary" onclick="loadMessageNotifications()">
              <i class="bi bi-arrow-clockwise me-1"></i>刷新
            </button>
          </div>
          <div class="card-body">
            <div class="table-responsive">
              <table class="table table-hover" id="notificationsTable">
                <thead>
                  <tr>
                    <th style="width: 20%">账号ID</th>
                    <th style="width: 30%">通知渠道</th>
                    <th style="width: 15%">状态</th>
                    <th style="width: 35%">操作</th>
                  </tr>
                </thead>
                <tbody id="notificationsTableBody">
                  <!-- 动态生成 -->
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 门店词库管理内容 -->
    <div id="keyword-library-section" class="content-section">
      <div class="content-header">
        <h2 class="mb-0">
          <i class="bi bi-collection me-2"></i>
          门店词库管理
        </h2>
        <p class="text-muted mb-0">管理共享门店词库，支持一键复制应用到其他账号</p>
      </div>
      <div class="content-body">
        <!-- 门店词库统计 -->
        <div class="row mb-4">
          <div class="col-md-4">
            <div class="card">
              <div class="card-body text-center">
                <i class="bi bi-collection text-primary fs-1 mb-2"></i>
                <h4 id="totalLibraries">0</h4>
                <p class="text-muted mb-0">门店词库总数</p>
              </div>
            </div>
          </div>
          <div class="col-md-4">
            <div class="card">
              <div class="card-body text-center">
                <i class="bi bi-clock text-info fs-1 mb-2"></i>
                <h4 id="recentUpdates">0</h4>
                <p class="text-muted mb-0">最近更新</p>
              </div>
            </div>
          </div>
          <div class="col-md-4">
            <div class="card">
              <div class="card-body text-center">
                <i class="bi bi-share text-warning fs-1 mb-2"></i>
                <h4 id="totalShares">0</h4>
                <p class="text-muted mb-0">分享次数</p>
              </div>
            </div>
          </div>
        </div>

        <!-- 门店词库列表 -->
        <div class="card">
          <div class="card-header">
            <div class="d-flex justify-content-between align-items-center mb-3">
              <span><i class="bi bi-list-ul me-2"></i>门店词库列表</span>
              <div class="d-flex gap-2">
              <button class="btn btn-sm btn-outline-warning" onclick="fixKeywordLibraryStats()" title="修复统计数据">
                <i class="bi bi-tools me-1"></i>修复统计
              </button>
              <button class="btn btn-sm btn-outline-primary" onclick="loadKeywordLibraries()">
                <i class="bi bi-arrow-clockwise me-1"></i>刷新
              </button>
              <button id="createLibraryBtn" class="btn btn-sm btn-success" onclick="showCreateLibraryModal()" style="display: none;">
                <i class="bi bi-plus-lg me-1"></i>创建库
              </button>
            </div>
            </div>
            <!-- 搜索框 -->
            <div class="row mt-3">
              <div class="col-md-20 col-lg-20">
                <div class="input-group">
                  <span class="input-group-text"><i class="bi bi-search"></i></span>
                  <input type="text" id="librarySearchInput" class="form-control" placeholder="搜索门店词库名称或描述..." onkeyup="searchKeywordLibraries()">
                  <button class="btn btn-outline-secondary" type="button" onclick="clearLibrarySearch()" title="清空搜索">
                    <i class="bi bi-x-lg"></i>
                  </button>
                </div>
              </div>
            </div>
          </div>
          <div class="card-body">
            <div id="keywordLibrariesContainer">
              <div class="text-center p-4 text-muted">
                <i class="bi bi-collection fs-1"></i>
                <p class="mt-2">暂无门店词库</p>
                <button class="btn btn-primary" onclick="showCreateLibraryModal()">
                  <i class="bi bi-plus-lg me-1"></i>创建第一个门店词库
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 通用词库管理内容 -->
    <div id="global-keywords-section" class="content-section">
      <div class="content-header">
        <h2 class="mb-0">
          <i class="bi bi-globe me-2"></i>
          通用词库管理
        </h2>
        <p class="text-muted mb-0">管理全局通用关键词，适用于所有已配置自动回复的账号和商品，优先级低于账号特定关键词</p>
      </div>
      <div class="content-body">
        <!-- 通用词库统计 -->
        <div class="row mb-4">
          <div class="col-md-3">
            <div class="card">
              <div class="card-body text-center">
                <i class="bi bi-globe text-primary fs-1 mb-2"></i>
                <h4 id="totalGlobalKeywords">0</h4>
                <p class="text-muted mb-0">总关键词数</p>
              </div>
            </div>
          </div>
          <div class="col-md-3">
            <div class="card">
              <div class="card-body text-center">
                <i class="bi bi-check-circle text-success fs-1 mb-2"></i>
                <h4 id="enabledGlobalKeywords">0</h4>
                <p class="text-muted mb-0">启用关键词</p>
              </div>
            </div>
          </div>
          <div class="col-md-3">
            <div class="card">
              <div class="card-body text-center">
                <i class="bi bi-x-circle text-danger fs-1 mb-2"></i>
                <h4 id="disabledGlobalKeywords">0</h4>
                <p class="text-muted mb-0">禁用关键词</p>
              </div>
            </div>
          </div>
          <div class="col-md-3">
            <div class="card">
              <div class="card-body text-center">
                <i class="bi bi-clock text-info fs-1 mb-2"></i>
                <h4 id="recentGlobalKeywords">0</h4>
                <p class="text-muted mb-0">今日新增</p>
              </div>
            </div>
          </div>
        </div>

        <!-- 添加关键词区域 -->
        <div class="card mb-4">
          <div class="card-header">
            <span><i class="bi bi-plus-circle me-2"></i>添加通用关键词</span>
          </div>
          <div class="card-body">
            <div class="row g-3">
              <div class="col-md-3">
                <label for="globalKeywordInput" class="form-label">
                  关键词
                  <button type="button" class="btn btn-link btn-sm p-0 ms-1" data-bs-toggle="modal" data-bs-target="#keywordHelpModal">
                    <i class="bi bi-question-circle"></i>
                  </button>
                </label>
                <input type="text" class="form-control" id="globalKeywordInput" placeholder="例如：你好 或 今天{*}位能用吗">
              </div>
              <div class="col-md-6">
                <label for="globalReplyInput" class="form-label">自动回复内容</label>
                <input type="text" class="form-control" id="globalReplyInput" placeholder="例如：您好，欢迎咨询！有什么可以帮助您的吗？">
              </div>
              <div class="col-md-2">
                <label for="globalKeywordType" class="form-label">类型</label>
                <select class="form-select" id="globalKeywordType">
                  <option value="text">文本</option>
                  <option value="image">图片</option>
                </select>
              </div>
              <div class="col-md-1">
                <label class="form-label">&nbsp;</label>
                <button class="btn btn-primary w-100" onclick="addGlobalKeyword()">
                  <i class="bi bi-plus-lg"></i>
                </button>
              </div>
            </div>
            <div class="mt-3" id="globalImageUrlGroup" style="display: none;">
              <label for="globalImageUrlInput" class="form-label">图片URL</label>
              <input type="text" class="form-control" id="globalImageUrlInput" placeholder="请输入图片URL">
            </div>
            <div class="mt-3">
              <small class="text-muted">
                <i class="bi bi-lightbulb me-1"></i>
                <strong>支持模糊匹配：</strong> 使用 <code>{*}</code> 作为占位符，如 <code>今天{*}位能用吗</code><br>
                <strong>支持变量：</strong>
                <code>{send_user_name}</code> 用户昵称，
                <code>{send_user_id}</code> 用户ID，
                <code>{send_message}</code> 用户消息，
                <code>{placeholder_1}</code> 占位符内容
              </small>
            </div>
          </div>
        </div>

        <!-- 批量操作区域 -->
        <div class="card mb-4">
          <div class="card-header">
            <span><i class="bi bi-upload me-2"></i>批量操作</span>
          </div>
          <div class="card-body">
            <div class="row g-3">
              <div class="col-md-6">
                <button class="btn btn-outline-success" onclick="showGlobalKeywordImportModal()">
                  <i class="bi bi-upload me-1"></i>文本导入
                </button>
                <button class="btn btn-outline-info ms-2" onclick="showGlobalKeywordExcelImportModal()">
                  <i class="bi bi-file-earmark-excel me-1"></i>Excel导入
                </button>
                <button class="btn btn-outline-primary ms-2" onclick="exportGlobalKeywords()">
                  <i class="bi bi-download me-1"></i>导出关键词
                </button>
              </div>
              <div class="col-md-6 text-end">
                <button class="btn btn-outline-warning" onclick="toggleAllGlobalKeywords(true)">
                  <i class="bi bi-check-all me-1"></i>全部启用
                </button>
                <button class="btn btn-outline-secondary ms-2" onclick="toggleAllGlobalKeywords(false)">
                  <i class="bi bi-x-circle me-1"></i>全部禁用
                </button>
              </div>
            </div>
          </div>
        </div>

        <!-- 通用关键词列表 -->
        <div class="card">
          <div class="card-header d-flex justify-content-between align-items-center">
            <span><i class="bi bi-list-ul me-2"></i>通用关键词列表</span>
            <div class="d-flex gap-2">
              <div class="input-group" style="width: 300px;">
                <input type="text" class="form-control" id="globalKeywordSearchInput" placeholder="搜索关键词或回复内容...">
                <button class="btn btn-outline-secondary" onclick="searchGlobalKeywords()">
                  <i class="bi bi-search"></i>
                </button>
              </div>
              <button class="btn btn-sm btn-outline-primary" onclick="loadGlobalKeywords()">
                <i class="bi bi-arrow-clockwise me-1"></i>刷新
              </button>
            </div>
          </div>
          <div class="card-body">
            <div id="globalKeywordsContainer">
              <div class="text-center p-4 text-muted">
                <i class="bi bi-globe fs-1"></i>
                <p class="mt-2">暂无通用关键词</p>
                <button class="btn btn-primary" onclick="document.getElementById('globalKeywordInput').focus()">
                  <i class="bi bi-plus-lg me-1"></i>添加第一个通用关键词
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 日志管理内容 -->
    <div id="logs-section" class="content-section">
      <div class="content-header">
        <h2 class="mb-0">
          <i class="bi bi-file-text me-2"></i>
          日志管理
        </h2>
        <p class="text-muted mb-0">实时显示系统日志，支持自动刷新和统计分析</p>
      </div>

      <div class="content-body">
        <!-- 日志控制 -->
        <div class="row mb-3">
          <div class="col-md-3">
            <label for="logLines" class="form-label">显示行数</label>
            <select class="form-select" id="logLines" onchange="refreshLogs()">
              <option value="100">100行</option>
              <option value="200" selected>200行</option>
              <option value="500">500行</option>
              <option value="1000">1000行</option>
              <option value="2000">2000行</option>
            </select>
          </div>
          <div class="col-md-9">
            <label class="form-label">&nbsp;</label>
            <div class="d-flex gap-2">
              <button class="btn btn-outline-primary" onclick="refreshLogs()">
                <i class="bi bi-arrow-clockwise me-1"></i>刷新日志
              </button>
              <button class="btn btn-outline-secondary" onclick="clearLogsDisplay()">
                <i class="bi bi-trash me-1"></i>清空显示
              </button>
              <button class="btn btn-outline-danger" onclick="clearLogsServer()">
                <i class="bi bi-trash3 me-1"></i>清空服务器日志
              </button>
              <button class="btn btn-outline-info" onclick="showLogStats()">
                <i class="bi bi-bar-chart me-1"></i>统计信息
              </button>
              <button class="btn btn-outline-info" onclick="toggleAutoRefresh()">
                <i class="bi bi-play-circle me-1"></i><span id="autoRefreshText">开启自动刷新</span>
              </button>
            </div>
          </div>
        </div>

        <!-- 日志显示区域 -->
        <div class="card">
          <div class="card-header d-flex justify-content-between align-items-center">
            <span>系统日志</span>
            <div class="d-flex gap-2">
              <span class="badge bg-secondary" id="logCount">0 条日志</span>
              <span class="badge bg-info" id="lastUpdate">未更新</span>
            </div>
          </div>
          <div class="card-body p-0">
            <div id="logContainer" class="log-container">
              <div class="text-center p-4 text-muted">
                <i class="bi bi-file-text fs-1"></i>
                <p class="mt-2">点击刷新按钮加载日志</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 系统设置内容 -->
    <div id="system-settings-section" class="content-section">
      <div class="content-header">
        <h2 class="mb-0">
          <i class="bi bi-gear me-2"></i>
          系统设置
        </h2>
        <p class="text-muted mb-0">管理系统配置和用户设置</p>
      </div>
      <div class="content-body">
        <!-- 关键词未匹配回复设置 -->
        <div class="row mt-4">
          <div class="col-md-12">
            <div class="card">
              <div class="card-header">
                <i class="bi bi-chat-left-text me-2"></i>关键词未匹配回复设置
              </div>
              <div class="card-body">
                <form id="unmatchReplyForm">
                  <div class="mb-3">
                    <label for="unmatchDefaultReply" class="form-label">默认回复内容</label>
                    <textarea class="form-control" id="unmatchDefaultReply" rows="3" 
                      placeholder="请输入当关键词未匹配时的默认回复内容"></textarea>
                    <div class="form-text">
                      <i class="bi bi-info-circle me-1"></i>
                      当关键词匹配失败、AI回复失败、默认回复也不可用时，系统将发送此消息
                    </div>
                  </div>
                  <button type="submit" class="btn btn-primary">
                    <i class="bi bi-check-circle me-1"></i>保存设置
                  </button>
                </form>
                <div id="unmatchReplyStatus" class="mt-3" style="display: none;">
                  <div class="alert alert-success mb-0">
                    <i class="bi bi-check-circle me-2"></i>
                    <span id="unmatchReplyStatusText">设置已更新</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 门店识别成功后引导话术设置 -->
        <div class="row mt-4">
          <div class="col-md-12">
            <div class="card">
              <div class="card-header">
                <i class="bi bi-shop me-2"></i>门店识别成功后引导话术设置
              </div>
              <div class="card-body">
                <form id="storeGuideForm">
                  <div class="mb-3">
                    <label for="storeGuideText" class="form-label">引导话术内容</label>
                    <textarea class="form-control" id="storeGuideText" rows="3" 
                      placeholder="请输入门店识别成功后的引导话术，例如：上述店铺是可用的，直接拍就行"></textarea>
                    <div class="form-text">
                      <i class="bi bi-info-circle me-1"></i>
                      当通过Excel批量导入门店关键词时，系统会在门店列表后添加此引导话术
                    </div>
                  </div>
                  <button type="submit" class="btn btn-primary">
                    <i class="bi bi-check-circle me-1"></i>保存设置
                  </button>
                </form>
                <div id="storeGuideStatus" class="mt-3" style="display: none;">
                  <div class="alert alert-success mb-0">
                    <i class="bi bi-check-circle me-2"></i>
                    <span id="storeGuideStatusText">设置已更新</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 延迟引导话术设置 -->
        <div class="row mt-4">
          <div class="col-md-12">
            <div class="card">
              <div class="card-header">
                <i class="bi bi-clock-history me-2"></i>延迟引导话术设置
              </div>
              <div class="card-body">
                <div class="row">
                  <div class="col-md-6">
                    <div class="mb-3">
                      <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" id="delayedGuideEnabled">
                        <label class="form-check-label" for="delayedGuideEnabled">
                          <strong>启用延迟引导话术</strong>
                        </label>
                      </div>
                      <div class="form-text">
                        <i class="bi bi-info-circle me-1"></i>
                        关键词回复成功后，如果用户在指定时间内未发送新消息或下单，自动发送引导话术
                      </div>
                    </div>
                  </div>
                  <div class="col-md-6">
                    <div class="mb-3">
                      <label for="delayedGuideDelay" class="form-label">延迟时间（秒）</label>
                      <input type="number" class="form-control" id="delayedGuideDelay" 
                        min="10" max="3600" step="1" value="60">
                      <div class="form-text">
                        <i class="bi bi-info-circle me-1"></i>
                        延迟发送引导话术的时间，建议设置为60-300秒
                      </div>
                    </div>
                  </div>
                </div>
                <div class="mb-3">
                  <label for="delayedGuideText" class="form-label">引导话术内容</label>
                  <textarea class="form-control" id="delayedGuideText" rows="3" 
                    placeholder="请输入延迟引导话术内容，例如：亲，库存有限，如果有您要去的门店，请尽快下单哦"></textarea>
                  <div class="form-text">
                    <i class="bi bi-info-circle me-1"></i>
                    当用户触发关键词回复后，在指定时间内未活跃时发送的引导消息
                  </div>
                </div>
                <button type="button" class="btn btn-primary" onclick="updateDelayedGuideSettings()">
                  <i class="bi bi-check-circle me-1"></i>保存设置
                </button>
                <div id="delayedGuideStatus" class="mt-3" style="display: none;">
                  <div class="alert alert-success mb-0">
                    <i class="bi bi-check-circle me-2"></i>
                    <span id="delayedGuideStatusText">设置已更新</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 注册设置 (仅管理员可见) -->
        <div id="registration-settings" class="row mt-4" style="display: none;">
          <div class="col-md-6">
            <div class="card">
              <div class="card-header">
                <i class="bi bi-person-plus me-2"></i>注册设置
                <span class="badge bg-warning ms-2">管理员专用</span>
              </div>
              <div class="card-body">
                <div class="mb-3">
                  <div class="form-check form-switch">
                    <input class="form-check-input" type="checkbox" id="registrationEnabled">
                    <label class="form-check-label" for="registrationEnabled">
                      <strong>开启用户注册</strong>
                    </label>
                  </div>
                  <div class="form-text">
                    <i class="bi bi-info-circle me-1"></i>
                    关闭后，新用户将无法注册账号，登录页面也不会显示注册链接
                  </div>
                </div>
                <button type="button" class="btn btn-primary" onclick="updateRegistrationSettings()">
                  <i class="bi bi-check-circle me-1"></i>保存设置
                </button>
                <div id="registrationStatus" class="mt-3" style="display: none;">
                  <div class="alert alert-info mb-0">
                    <i class="bi bi-info-circle me-2"></i>
                    <span id="registrationStatusText"></span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 备份管理 (仅管理员可见) -->
        <div id="backup-management" class="row mt-4" style="display: none;">
          <div class="col-12">
            <div class="card">
              <div class="card-header">
                <i class="bi bi-archive me-2"></i>备份管理
                <span class="badge bg-warning ms-2">管理员专用</span>
              </div>
              <div class="card-body">
                <div class="row">
                  <!-- 数据库备份 -->
                  <div class="col-md-6">
                    <h6 class="mb-3">
                      <i class="bi bi-database-down me-2"></i>数据库备份
                    </h6>
                    <p class="text-muted mb-3">直接下载完整的数据库文件，包含所有用户数据和设置</p>
                    <button type="button" class="btn btn-success" onclick="downloadDatabaseBackup()">
                      <i class="bi bi-download me-1"></i>下载数据库
                    </button>
                    <div class="mt-2">
                      <small class="text-muted">
                        <i class="bi bi-info-circle me-1"></i>
                        推荐方式：完整备份，恢复简单
                      </small>
                    </div>
                  </div>

                  <!-- 数据库恢复 -->
                  <div class="col-md-6">
                    <h6 class="mb-3">
                      <i class="bi bi-database-up me-2"></i>数据库恢复
                    </h6>
                    <p class="text-muted mb-3">上传数据库文件直接替换当前数据库，系统将自动重新加载</p>
                    <div class="mb-3">
                      <input type="file" class="form-control" id="databaseFile" accept=".db">
                    </div>
                    <button type="button" class="btn btn-danger" onclick="uploadDatabaseBackup()">
                      <i class="bi bi-upload me-1"></i>恢复数据库
                    </button>
                    <div class="mt-2">
                      <small class="text-danger">
                        <i class="bi bi-exclamation-triangle me-1"></i>
                        警告：将覆盖所有当前数据！
                      </small>
                    </div>
                  </div>
                </div>



                <!-- 系统缓存管理 -->
                <div class="row mt-4">
                  <div class="col-12">
                    <h6 class="mb-3">
                      <i class="bi bi-arrow-clockwise me-2"></i>系统缓存管理
                    </h6>
                    <p class="text-muted mb-3">如果导入备份后关键字等数据没有立即更新，可以手动刷新系统缓存</p>
                    <button type="button" class="btn btn-info" onclick="reloadSystemCache()">
                      <i class="bi bi-arrow-clockwise me-1"></i>刷新系统缓存
                    </button>
                  </div>
                </div>

                <div class="alert alert-warning mt-4" role="alert">
                  <i class="bi bi-exclamation-triangle me-2"></i>
                  <strong>注意：</strong>导入备份将会覆盖当前系统的所有数据，请谨慎操作！建议在导入前先导出当前数据作为备份。
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 关于页面内容 -->
    <div id="about-section" class="content-section">
      <div class="content-header">
        <h2 class="mb-0">
          <i class="bi bi-info-circle me-2"></i>
          关于
        </h2>
        <p class="text-muted mb-0">联系我们和技术支持</p>
      </div>
      <div class="content-body">
        <div class="row justify-content-center">
          <div class="col-md-6 col-lg-4">
            <div class="card">
              <div class="card-header">
                <i class="bi bi-wechat me-2"></i>微信
              </div>
              <div class="card-body text-center">
                <img src="/static/wechat-group.png" alt="微信二维码" class="img-fluid" style="max-width: 200px;">
                <p class="mt-3 text-muted">扫码添加微信</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 个人信息内容 -->
    <div id="personal-info-section" class="content-section">
      <div class="content-header">
        <h2 class="mb-0">
          <i class="bi bi-person me-2"></i>
          个人信息
        </h2>
        <p class="text-muted mb-0">管理您的个人资料和账户设置</p>
      </div>
      <div class="content-body">
        <div class="row">
          <!-- 基本信息 -->
          <div class="col-md-6">
            <div class="card">
              <div class="card-header">
                <i class="bi bi-person-badge me-2"></i>基本信息
              </div>
              <div class="card-body">
                <form id="userInfoForm">
                  <div class="mb-3">
                    <label for="userUsername" class="form-label">用户名</label>
                    <input type="text" class="form-control" id="userUsername" readonly>
                    <div class="form-text">用户名不可修改</div>
                  </div>
                  <div class="mb-3">
                    <label for="userEmail" class="form-label">邮箱地址</label>
                    <input type="email" class="form-control" id="userEmail" required>
                  </div>
                  <div class="mb-3">
                    <label for="userPhone" class="form-label">手机号码（可选）</label>
                    <input type="tel" class="form-control" id="userPhone" placeholder="请输入手机号码">
                  </div>
                  <div class="mb-3">
                    <label for="userNickname" class="form-label">昵称（可选）</label>
                    <input type="text" class="form-control" id="userNickname" placeholder="请输入昵称">
                  </div>
                  <button type="submit" class="btn btn-primary">
                    <i class="bi bi-check-circle me-1"></i>更新信息
                  </button>
                </form>
              </div>
            </div>
          </div>

          <!-- 密码设置 -->
          <div class="col-md-6">
            <div class="card">
              <div class="card-header">
                <i class="bi bi-shield-lock me-2"></i>密码设置
              </div>
              <div class="card-body">
                <form id="personalPasswordForm">
                  <div class="mb-3">
                    <label for="personalCurrentPassword" class="form-label">当前密码</label>
                    <input type="password" class="form-control" id="personalCurrentPassword" required>
                  </div>
                  <div class="mb-3">
                    <label for="personalNewPassword" class="form-label">新密码</label>
                    <input type="password" class="form-control" id="personalNewPassword" required>
                    <div class="form-text">密码长度至少6位</div>
                  </div>
                  <div class="mb-3">
                    <label for="personalConfirmPassword" class="form-label">确认新密码</label>
                    <input type="password" class="form-control" id="personalConfirmPassword" required>
                  </div>
                  <button type="submit" class="btn btn-primary">
                    <i class="bi bi-check-circle me-1"></i>更新密码
                  </button>
                </form>
              </div>
            </div>
          </div>
        </div>

        <!-- 聚合豆余额信息 -->
        <div class="row mt-4">
          <div class="col-md-6">
            <div class="card">
              <div class="card-header">
                <i class="bi bi-coin me-2"></i>聚合豆余额
              </div>
              <div class="card-body text-center">
                <div class="display-4 text-warning mb-3" id="userBalance">0.00</div>
                <p class="text-muted mb-3">当前聚合豆余额</p>
                <button class="btn btn-outline-info" onclick="loadBalanceRecords()">
                  <i class="bi bi-list-ul me-1"></i>查看消费记录
                </button>
              </div>
            </div>
          </div>
          <div class="col-md-6" id="adminBalanceManagement" style="display: none;">
            <div class="card">
              <div class="card-header">
                <i class="bi bi-gear me-2"></i>余额管理
                <span class="badge bg-warning ms-2">管理员专用</span>
              </div>
              <div class="card-body">
                <form id="balanceAdjustForm">
                  <div class="mb-3">
                    <label for="balanceAmount" class="form-label">调整金额</label>
                    <div class="input-group">
                      <span class="input-group-text">聚合豆</span>
                      <input type="number" class="form-control" id="balanceAmount" 
                             placeholder="正数为充值，负数为扣除" step="0.01" required>
                    </div>
                  </div>
                  <div class="mb-3">
                    <label for="balanceDescription" class="form-label">调整说明</label>
                    <input type="text" class="form-control" id="balanceDescription" 
                           placeholder="请输入调整原因">
                  </div>
                  <button type="submit" class="btn btn-primary w-100">
                    <i class="bi bi-check-circle me-1"></i>执行调整
                  </button>
                </form>
              </div>
            </div>
          </div>
        </div>

        <!-- 账户统计信息 -->
        <div class="row mt-4">
          <div class="col-12">
            <div class="card">
              <div class="card-header">
                <i class="bi bi-bar-chart me-2"></i>账户统计
              </div>
              <div class="card-body">
                <div class="row text-center">
                  <div class="col-md-3">
                    <div class="stat-item">
                      <h3 class="text-primary" id="userAccountCount">0</h3>
                      <p class="text-muted mb-0">管理账号数</p>
                    </div>
                  </div>

                  <div class="col-md-3">
                    <div class="stat-item">
                      <h3 class="text-info" id="userOrderCount">0</h3>
                      <p class="text-muted mb-0">订单总数</p>
                    </div>
                  </div>
                  <div class="col-md-3">
                    <div class="stat-item">
                      <h3 class="text-warning" id="userJoinDate">-</h3>
                      <p class="text-muted mb-0">注册时间</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div> <!-- 结束 main-content -->

  <!-- 扫码登录模态框 -->
  <div class="modal fade" id="qrCodeLoginModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered modal-lg">
      <div class="modal-content">
        <div class="modal-header bg-success text-white">
          <h5 class="modal-title">
            <i class="bi bi-qr-code me-2"></i>扫码登录闲鱼账号
          </h5>
          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body text-center py-4">
          <!-- 步骤指引 -->
          <div class="row mb-4">
            <div class="col-12">
              <div class="d-flex justify-content-center align-items-center">
                <div class="step-item me-3">
                  <div class="step-number bg-success text-white rounded-circle d-inline-flex align-items-center justify-content-center" style="width: 30px; height: 30px;">1</div>
                  <small class="d-block mt-1">打开闲鱼APP</small>
                </div>
                <i class="bi bi-arrow-right text-muted me-3"></i>
                <div class="step-item me-3">
                  <div class="step-number bg-success text-white rounded-circle d-inline-flex align-items-center justify-content-center" style="width: 30px; height: 30px;">2</div>
                  <small class="d-block mt-1">扫描二维码</small>
                </div>
                <i class="bi bi-arrow-right text-muted me-3"></i>
                <div class="step-item">
                  <div class="step-number bg-success text-white rounded-circle d-inline-flex align-items-center justify-content-center" style="width: 30px; height: 30px;">3</div>
                  <small class="d-block mt-1">自动添加账号</small>
                </div>
              </div>
            </div>
          </div>

          <!-- 二维码区域 -->
          <div id="qrCodeContainer">
            <div class="spinner-border text-success mb-3" role="status" style="width: 3rem; height: 3rem;">
              <span class="visually-hidden">生成二维码中...</span>
            </div>
            <p class="text-muted fs-5 mb-2">正在生成二维码...</p>
            <div class="alert alert-warning border-0 bg-light-warning d-inline-block qr-loading-tip">
              <i class="bi bi-clock me-2 text-warning"></i>
              <small class="text-warning fw-bold">二维码生成较慢，请耐心等待</small>
            </div>
          </div>
          <div id="qrCodeImage" style="display: none;">
            <div class="qr-code-wrapper p-3 bg-light rounded-3 d-inline-block mb-3">
              <img id="qrCodeImg" src="" alt="登录二维码" class="img-fluid" style="max-width: 280px;">
            </div>
            <h6 class="text-success mb-2">
              <i class="bi bi-phone me-2"></i>请使用闲鱼APP扫描二维码
            </h6>
            <div class="alert alert-info border-0 bg-light">
              <i class="bi bi-info-circle me-2 text-info"></i>
              <small>扫码后请等待页面提示，系统会自动获取并保存您的账号信息</small>
            </div>
          </div>

          <!-- 状态显示 -->
          <div id="qrCodeStatus" class="mt-3">
            <div class="d-flex align-items-center justify-content-center">
              <div class="spinner-border spinner-border-sm text-success me-2" role="status" style="display: none;" id="statusSpinner">
                <span class="visually-hidden">检查中...</span>
              </div>
              <span id="statusText" class="text-muted">等待扫码...</span>
            </div>
          </div>
        </div>
        <div class="modal-footer bg-light">
          <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
            <i class="bi bi-x-circle me-1"></i>关闭
          </button>
          <button type="button" class="btn btn-success" onclick="refreshQRCode()" id="refreshQRBtn">
            <i class="bi bi-arrow-clockwise me-1"></i>重新生成二维码
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- 添加通知渠道模态框 -->
  <div class="modal fade" id="addChannelModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">
            <i class="bi bi-plus-circle me-2"></i>
            <span id="addChannelModalTitle">添加通知渠道</span>
          </h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
          <!-- 渠道类型说明 -->
          <div id="channelTypeInfo" class="alert alert-info">
            <i class="bi bi-info-circle me-2"></i>
            <span id="channelTypeDescription">请配置通知渠道信息</span>
          </div>

          <form id="addChannelForm">
            <input type="hidden" id="channelType">

            <!-- 基本信息 -->
            <div class="row mb-3">
              <div class="col-md-6">
                <label for="channelName" class="form-label">渠道名称 <span class="text-danger">*</span></label>
                <input type="text" class="form-control" id="channelName" placeholder="例如：我的钉钉通知" required>
              </div>
              <div class="col-md-6">
                <label for="channelEnabled" class="form-label">状态</label>
                <div class="form-check form-switch mt-2">
                  <input class="form-check-input" type="checkbox" id="channelEnabled" checked>
                  <label class="form-check-label" for="channelEnabled">
                    启用此通知渠道
                  </label>
                </div>
              </div>
            </div>

            <!-- 动态配置字段 -->
            <div id="channelConfigFields">
              <!-- 根据渠道类型动态生成 -->
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
            <i class="bi bi-x-circle me-1"></i>取消
          </button>
          <button type="button" class="btn btn-primary" onclick="saveNotificationChannel()">
            <i class="bi bi-check-circle me-1"></i>保存配置
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- 编辑通知渠道模态框 -->
  <div class="modal fade" id="editChannelModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">
            <i class="bi bi-pencil me-2"></i>
            编辑通知渠道
          </h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
          <form id="editChannelForm">
            <input type="hidden" id="editChannelId">
            <input type="hidden" id="editChannelType">

            <!-- 基本信息 -->
            <div class="row mb-3">
              <div class="col-md-6">
                <label for="editChannelName" class="form-label">渠道名称 <span class="text-danger">*</span></label>
                <input type="text" class="form-control" id="editChannelName" placeholder="例如：我的钉钉通知" required>
              </div>
              <div class="col-md-6">
                <label for="editChannelEnabled" class="form-label">状态</label>
                <div class="form-check form-switch mt-2">
                  <input class="form-check-input" type="checkbox" id="editChannelEnabled" checked>
                  <label class="form-check-label" for="editChannelEnabled">
                    启用此通知渠道
                  </label>
                </div>
              </div>
            </div>

            <!-- 动态配置字段 -->
            <div id="editChannelConfigFields">
              <!-- 根据渠道类型动态生成 -->
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
          <button type="button" class="btn btn-primary" onclick="updateNotificationChannel()">保存修改</button>
        </div>
      </div>
    </div>
  </div>

  <!-- 配置账号通知模态框 -->
  <div class="modal fade" id="configNotificationModal" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">
            <i class="bi bi-gear me-2"></i>
            配置账号通知
          </h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
          <form id="configNotificationForm">
            <input type="hidden" id="configAccountId">
            <div class="mb-3">
              <label class="form-label">账号ID</label>
              <input type="text" class="form-control" id="displayAccountId" readonly>
            </div>
            <div class="mb-3">
              <label for="notificationChannel" class="form-label">选择通知渠道 <span class="text-danger">*</span></label>
              <select class="form-select" id="notificationChannel" required>
                <option value="">请选择通知渠道</option>
              </select>
              <small class="form-text text-muted">选择要接收此账号消息通知的渠道</small>
            </div>
            <div class="mb-3">
              <div class="form-check">
                <input class="form-check-input" type="checkbox" id="notificationEnabled" checked>
                <label class="form-check-label" for="notificationEnabled">
                  启用消息通知
                </label>
              </div>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
          <button type="button" class="btn btn-primary" onclick="saveAccountNotification()">保存配置</button>
        </div>
      </div>
    </div>
  </div>

  <!-- 添加卡券模态框 -->
  <div class="modal fade" id="addCardModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">
            <i class="bi bi-credit-card me-2"></i>
            添加卡券
          </h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
          <form id="addCardForm" onsubmit="event.preventDefault(); saveCard(); return false;">
            <div class="mb-3">
              <label class="form-label">卡券名称 <span class="text-danger">*</span></label>
              <input type="text" class="form-control" id="cardName" placeholder="例如：游戏点卡、会员卡等" required>
            </div>
            <div class="mb-3">
              <label class="form-label">卡券类型 <span class="text-danger">*</span></label>
              <select class="form-select" id="cardType" onchange="toggleCardTypeFields()" required>
                <option value="">请选择类型</option>
                <option value="api">API接口</option>
                <option value="text">固定文字</option>
                <option value="data">批量数据</option>
                <option value="image">图片</option>
              </select>
            </div>

            <!-- API配置 -->
            <div id="apiFields" class="card mb-3" style="display: none;">
              <div class="card-header">
                <h6 class="mb-0">API配置</h6>
              </div>
              <div class="card-body">
                <div class="mb-3">
                  <label class="form-label">卡种ID <span class="text-danger">*</span></label>
                  <input type="number" class="form-control" id="apiCouponSeedId" placeholder="请输入卡种ID" required>
                  <div class="form-text">请输入JH系统中的卡种ID</div>
                </div>
                <div class="mb-3">
                  <label class="form-label">公司SK <span class="text-danger">*</span></label>
                  <input type="text" class="form-control" id="apiCompanysk" placeholder="请输入公司SK" required>
                  <div class="form-text">请输入JH系统中的公司SK密钥</div>
                </div>
              </div>
            </div>

            <!-- 固定文字配置 -->
            <div id="textFields" class="card mb-3" style="display: none;">
              <div class="card-header">
                <h6 class="mb-0">固定文字配置</h6>
              </div>
              <div class="card-body">
                <div class="mb-3">
                  <label class="form-label">固定文字内容</label>
                  <textarea class="form-control" id="textContent" rows="5" placeholder="请输入要发送的固定文字内容..."></textarea>
                </div>
              </div>
            </div>

            <!-- 批量数据配置 -->
            <div id="dataFields" class="card mb-3" style="display: none;">
              <div class="card-header">
                <h6 class="mb-0">批量数据配置</h6>
              </div>
              <div class="card-body">
                <div class="mb-3">
                  <label class="form-label">数据内容 (一行一个)</label>
                  <textarea class="form-control" id="dataContent" rows="10" placeholder="请输入数据，每行一个：&#10;卡号1:密码1&#10;卡号2:密码2&#10;或者&#10;兑换码1&#10;兑换码2"></textarea>
                  <small class="form-text text-muted">支持格式：卡号:密码 或 单独的兑换码</small>
                </div>
              </div>
            </div>

            <!-- 图片配置 -->
            <div id="imageFields" class="card mb-3" style="display: none;">
              <div class="card-header">
                <h6 class="mb-0">图片配置</h6>
              </div>
              <div class="card-body">
                <div class="mb-3">
                  <label class="form-label">选择图片 <span class="text-danger">*</span></label>
                  <input type="file" class="form-control" id="cardImageFile" accept="image/*">
                  <small class="form-text text-muted">
                    <i class="bi bi-info-circle me-1"></i>
                    支持JPG、PNG、GIF格式，最大5MB，建议尺寸不超过4096x4096像素
                  </small>
                </div>

                <div id="cardImagePreview" class="mb-3" style="display: none;">
                  <label class="form-label">图片预览</label>
                  <div class="preview-container">
                    <img id="cardPreviewImg" src="" alt="预览图片"
                         style="max-width: 100%; max-height: 300px; border-radius: 8px; border: 1px solid #ddd;">
                  </div>
                </div>
              </div>
            </div>

            <div class="mb-3">
              <label class="form-label">延时发货时间</label>
              <div class="input-group">
                <input type="number" class="form-control" id="cardDelaySeconds" value="0" min="0" max="3600" placeholder="0">
                <span class="input-group-text">秒</span>
              </div>
              <small class="form-text text-muted">
                <i class="bi bi-clock me-1"></i>
                设置自动发货的延时时间，0表示立即发货，最大3600秒(1小时)
              </small>
            </div>

            <div class="mb-3">
              <label class="form-label">备注信息</label>
              <textarea class="form-control" id="cardDescription" rows="3" placeholder="可选的备注信息，支持变量替换：&#10;{DELIVERY_CONTENT} - 发货内容&#10;例如：您的卡券信息：{DELIVERY_CONTENT}，请妥善保管。"></textarea>
              <small class="form-text text-muted">
                <i class="bi bi-info-circle me-1"></i>
                备注内容会与发货内容一起发送。使用 <code>{DELIVERY_CONTENT}</code> 变量可以在备注中插入实际的发货内容。
              </small>
            </div>

            <!-- 库存预警设置 -->
            <div class="mb-3" id="stockWarningField" style="display: none;">
              <label class="form-label">库存预警数量</label>
              <input type="number" class="form-control" id="stockWarningThreshold" min="0" value="0" placeholder="0">
              <small class="form-text text-muted">
                <i class="bi bi-exclamation-triangle me-1"></i>
                当卡券剩余库存小于等于此数量时，通过微信群发送预警通知。设置为0表示不启用预警。
              </small>
            </div>


          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
          <button type="button" class="btn btn-primary" onclick="saveCard()">保存卡券</button>
        </div>
      </div>
    </div>
  </div>

  <!-- 编辑卡券模态框 -->
  <div class="modal fade" id="editCardModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">
            <i class="bi bi-pencil me-2"></i>
            编辑卡券
          </h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
          <form id="editCardForm">
            <input type="hidden" id="editCardId">
            <div class="mb-3">
              <label class="form-label">卡券名称 <span class="text-danger">*</span></label>
              <input type="text" class="form-control" id="editCardName" required>
            </div>
            <div class="mb-3">
              <label class="form-label">卡券类型 <span class="text-danger">*</span></label>
              <select class="form-select" id="editCardType" onchange="toggleEditCardTypeFields()" required>
                <option value="api">API接口</option>
                <option value="text">固定文字</option>
                <option value="data">批量数据</option>
                <option value="image">图片</option>
              </select>
            </div>

            <!-- API配置 -->
            <div id="editApiFields" class="card mb-3" style="display: none;">
              <div class="card-header">
                <h6 class="mb-0">API配置</h6>
              </div>
              <div class="card-body">
                <div class="mb-3">
                  <label class="form-label">卡种ID <span class="text-danger">*</span></label>
                  <input type="number" class="form-control" id="editApiCouponSeedId" required>
                  <div class="form-text">请输入JH系统中的卡种ID</div>
                </div>
                <div class="mb-3">
                  <label class="form-label">公司SK <span class="text-danger">*</span></label>
                  <input type="text" class="form-control" id="editApiCompanysk" required>
                  <div class="form-text">请输入JH系统中的公司SK密钥</div>
                </div>
              </div>
            </div>

            <!-- 固定文字配置 -->
            <div id="editTextFields" class="card mb-3" style="display: none;">
              <div class="card-header">
                <h6 class="mb-0">固定文字配置</h6>
              </div>
              <div class="card-body">
                <div class="mb-3">
                  <label class="form-label">固定文字内容</label>
                  <textarea class="form-control" id="editTextContent" rows="5"></textarea>
                </div>
              </div>
            </div>

            <!-- 批量数据配置 -->
            <div id="editDataFields" class="card mb-3" style="display: none;">
              <div class="card-header">
                <h6 class="mb-0">批量数据配置</h6>
              </div>
              <div class="card-body">
                <div class="mb-3">
                  <label class="form-label">数据内容 (一行一个)</label>
                  <textarea class="form-control" id="editDataContent" rows="10"></textarea>
                  <small class="form-text text-muted">支持格式：卡号:密码 或 单独的兑换码</small>
                </div>
              </div>
            </div>

            <!-- 图片配置 -->
            <div id="editImageFields" class="card mb-3" style="display: none;">
              <div class="card-header">
                <h6 class="mb-0">图片配置</h6>
              </div>
              <div class="card-body">
                <div class="mb-3">
                  <label class="form-label">当前图片</label>
                  <div id="editCurrentImagePreview" style="display: none;">
                    <img id="editCurrentImg" src="" alt="当前图片"
                         style="max-width: 100%; max-height: 200px; border-radius: 8px; border: 1px solid #ddd;">
                    <div class="mt-2">
                      <small class="text-muted">当前使用的图片</small>
                    </div>
                  </div>
                  <div id="editNoImageText" class="text-muted">
                    <i class="bi bi-image me-1"></i>暂无图片
                  </div>
                </div>

                <div class="mb-3">
                  <label class="form-label">更换图片</label>
                  <input type="file" class="form-control" id="editCardImageFile" accept="image/*">
                  <small class="form-text text-muted">
                    <i class="bi bi-info-circle me-1"></i>
                    支持JPG、PNG、GIF格式，最大5MB，建议尺寸不超过4096x4096像素
                  </small>
                </div>

                <div id="editCardImagePreview" class="mb-3" style="display: none;">
                  <label class="form-label">新图片预览</label>
                  <div class="preview-container">
                    <img id="editCardPreviewImg" src="" alt="预览图片"
                         style="max-width: 100%; max-height: 300px; border-radius: 8px; border: 1px solid #ddd;">
                  </div>
                </div>
              </div>
            </div>

            <div class="mb-3">
              <div class="form-check">
                <input class="form-check-input" type="checkbox" id="editCardEnabled">
                <label class="form-check-label" for="editCardEnabled">
                  启用此卡券
                </label>
              </div>
            </div>

            <div class="mb-3">
              <label class="form-label">延时发货时间</label>
              <div class="input-group">
                <input type="number" class="form-control" id="editCardDelaySeconds" value="0" min="0" max="3600" placeholder="0">
                <span class="input-group-text">秒</span>
              </div>
              <small class="form-text text-muted">
                <i class="bi bi-clock me-1"></i>
                设置自动发货的延时时间，0表示立即发货，最大3600秒(1小时)
              </small>
            </div>

            <div class="mb-3">
              <label class="form-label">备注信息</label>
              <textarea class="form-control" id="editCardDescription" rows="3" placeholder="可选的备注信息，支持变量替换：&#10;{DELIVERY_CONTENT} - 发货内容&#10;例如：您的卡券信息：{DELIVERY_CONTENT}，请妥善保管。"></textarea>
              <small class="form-text text-muted">
                <i class="bi bi-info-circle me-1"></i>
                备注内容会与发货内容一起发送。使用 <code>{DELIVERY_CONTENT}</code> 变量可以在备注中插入实际的发货内容。
              </small>
            </div>

            <!-- 库存预警设置 -->
            <div class="mb-3" id="editStockWarningField" style="display: none;">
              <label class="form-label">库存预警数量</label>
              <input type="number" class="form-control" id="editStockWarningThreshold" min="0" value="0" placeholder="0">
              <small class="form-text text-muted">
                <i class="bi bi-exclamation-triangle me-1"></i>
                当卡券剩余库存小于等于此数量时，通过微信群发送预警通知。设置为0表示不启用预警。
              </small>
            </div>


          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
          <button type="button" class="btn btn-primary" onclick="updateCard()">保存修改</button>
        </div>
      </div>
    </div>
  </div>

  <!-- 添加发货规则模态框 -->
  <div class="modal fade" id="addDeliveryRuleModal" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">
            <i class="bi bi-truck me-2"></i>
            添加发货规则
          </h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
          <form id="addDeliveryRuleForm">
            <div class="mb-3">
              <label class="form-label">商品ID <span class="text-danger">*</span></label>
              <textarea class="form-control" id="productItemId" rows="4" placeholder="请输入商品ID，支持多种分隔方式：&#10;123456&#10;789012&#10;345678&#10;&#10;或用逗号分隔：123456,789012,345678" required></textarea>
              <small class="form-text text-muted">输入要设置自动发货的商品ID，支持换行分隔或逗号分隔</small>
            </div>
            <div class="mb-3">
              <label class="form-label">匹配卡券 <span class="text-danger">*</span></label>
              <select class="form-select" id="selectedCard" required>
                <option value="">请选择卡券</option>
              </select>
            </div>
            <div class="mb-3">
              <label class="form-label">发货数量</label>
              <input type="number" class="form-control" id="deliveryCount" value="1" min="1" max="10">
              <small class="form-text text-muted">每次发货的数量</small>
            </div>
            <div class="mb-3">
              <div class="form-check">
                <input class="form-check-input" type="checkbox" id="ruleEnabled" checked>
                <label class="form-check-label" for="ruleEnabled">
                  启用此规则
                </label>
              </div>
            </div>
            <div class="mb-3">
              <div class="form-check">
                <input class="form-check-input" type="checkbox" id="generateImage" checked>
                <label class="form-check-label" for="generateImage">
                  生成美化图片
                </label>
              </div>
              <small class="form-text text-muted">对于12位数字券码，是否生成美化图片（取消勾选将直接发送券码文本）</small>
            </div>
            
            <!-- 多规格设置 -->
            <div class="mb-3">
              <div class="form-check form-switch">
                <input class="form-check-input" type="checkbox" id="ruleIsMultiSpec" onchange="toggleRuleMultiSpecFields()">
                <label class="form-check-label" for="ruleIsMultiSpec">
                  <strong>多规格发货规则</strong>
                </label>
              </div>
              <div class="form-text">开启后可以为同一商品的不同规格创建不同的发货规则</div>
            </div>

            <!-- 多规格字段 -->
            <div id="ruleMultiSpecFields" style="display: none;">
              <div class="row">
                <div class="col-md-6">
                  <div class="mb-3">
                    <label class="form-label">规格名称 <span class="text-danger">*</span></label>
                    <input type="text" class="form-control" id="ruleSpecName" placeholder="例如：套餐类型、颜色、尺寸">
                    <div class="form-text">规格的名称，如套餐类型、颜色等</div>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="mb-3">
                    <label class="form-label">规格值 <span class="text-danger">*</span></label>
                    <input type="text" class="form-control" id="ruleSpecValue" placeholder="例如：30天、红色、XL">
                    <div class="form-text">具体的规格值，如30天、红色等</div>
                  </div>
                </div>
              </div>
              <div class="alert alert-info">
                <i class="bi bi-info-circle me-2"></i>
                <strong>多规格发货说明：</strong><br>
                • 开启多规格后，系统会根据订单的规格信息匹配对应的发货规则<br>
                • 规格名称和规格值必须与商品实际规格完全匹配<br>
                • 如果找不到匹配的多规格规则，将使用普通发货规则作为兜底
              </div>
            </div>
            
            <div class="mb-3">
              <label class="form-label">备注</label>
              <textarea class="form-control" id="ruleDescription" rows="2" placeholder="可选的备注信息..."></textarea>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
          <button type="button" class="btn btn-primary" onclick="saveDeliveryRule()">保存规则</button>
        </div>
      </div>
    </div>
  </div>

  <!-- 编辑发货规则模态框 -->
  <div class="modal fade" id="editDeliveryRuleModal" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">
            <i class="bi bi-pencil me-2"></i>
            编辑发货规则
          </h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
          <form id="editDeliveryRuleForm">
            <input type="hidden" id="editRuleId">
            <div class="mb-3">
              <label class="form-label">商品ID <span class="text-danger">*</span></label>
              <textarea class="form-control" id="editProductItemId" rows="2" placeholder="请输入商品ID" required readonly></textarea>
              <small class="form-text text-muted">商品ID（编辑时不可修改，如需修改请删除后重新创建）</small>
            </div>
            <div class="mb-3">
              <label class="form-label">匹配卡券 <span class="text-danger">*</span></label>
              <select class="form-select" id="editSelectedCard" required>
                <option value="">请选择卡券</option>
              </select>
            </div>
            <div class="mb-3">
              <label class="form-label">发货数量</label>
              <input type="number" class="form-control" id="editDeliveryCount" value="1" min="1" max="10">
              <small class="form-text text-muted">每次发货的数量</small>
            </div>
            <div class="mb-3">
              <div class="form-check">
                <input class="form-check-input" type="checkbox" id="editRuleEnabled">
                <label class="form-check-label" for="editRuleEnabled">
                  启用此规则
                </label>
              </div>
            </div>
            <div class="mb-3">
              <div class="form-check">
                <input class="form-check-input" type="checkbox" id="editGenerateImage">
                <label class="form-check-label" for="editGenerateImage">
                  生成美化图片
                </label>
              </div>
              <small class="form-text text-muted">对于12位数字券码，是否生成美化图片（取消勾选将直接发送券码文本）</small>
            </div>
            
            <!-- 多规格设置 -->
            <div class="mb-3">
              <div class="form-check form-switch">
                <input class="form-check-input" type="checkbox" id="editRuleIsMultiSpec" onchange="toggleEditRuleMultiSpecFields()">
                <label class="form-check-label" for="editRuleIsMultiSpec">
                  <strong>多规格发货规则</strong>
                </label>
              </div>
              <div class="form-text">开启后可以为同一商品的不同规格创建不同的发货规则</div>
            </div>

            <!-- 多规格字段 -->
            <div id="editRuleMultiSpecFields" style="display: none;">
              <div class="row">
                <div class="col-md-6">
                  <div class="mb-3">
                    <label class="form-label">规格名称 <span class="text-danger">*</span></label>
                    <input type="text" class="form-control" id="editRuleSpecName" placeholder="例如：套餐类型、颜色、尺寸">
                    <div class="form-text">规格的名称，如套餐类型、颜色等</div>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="mb-3">
                    <label class="form-label">规格值 <span class="text-danger">*</span></label>
                    <input type="text" class="form-control" id="editRuleSpecValue" placeholder="例如：30天、红色、XL">
                    <div class="form-text">具体的规格值，如30天、红色等</div>
                  </div>
                </div>
              </div>
              <div class="alert alert-info">
                <i class="bi bi-info-circle me-2"></i>
                <strong>多规格发货说明：</strong><br>
                • 开启多规格后，系统会根据订单的规格信息匹配对应的发货规则<br>
                • 规格名称和规格值必须与商品实际规格完全匹配<br>
                • 如果找不到匹配的多规格规则，将使用普通发货规则作为兜底
              </div>
            </div>
            
            <div class="mb-3">
              <label class="form-label">备注</label>
              <textarea class="form-control" id="editRuleDescription" rows="2"></textarea>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
          <button type="button" class="btn btn-primary" onclick="updateDeliveryRule()">保存修改</button>
        </div>
      </div>
    </div>
  </div>

  <!-- 加载动画 -->
  <div class="loading d-none" id="loading">
    <div class="spinner-border text-primary loading-spinner" role="status">
      <span class="visually-hidden">加载中...</span>
    </div>
  </div>

  <!-- 提示消息容器 -->
  <div class="toast-container"></div>

  <!-- JS依赖 -->
  <script src="/static/lib/bootstrap/bootstrap.bundle.min.js"></script>
  <!-- SheetJS库用于Excel文件解析 -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
  <script src="/static/js/app.js"></script>

  <!-- 订单详情模态框 -->
  <div class="modal fade" id="orderDetailModal" tabindex="-1">
    <div class="modal-dialog modal-xl">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">
            <i class="bi bi-receipt me-2"></i>订单详情
          </h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
          <div class="row">
            <div class="col-md-6">
              <div class="card">
                <div class="card-header">
                  <h6 class="mb-0">基本信息</h6>
                </div>
                <div class="card-body">
                  <div class="row mb-2">
                    <div class="col-4 text-muted">订单号:</div>
                    <div class="col-8" id="detailOrderId">-</div>
                  </div>
                  <div class="row mb-2">
                    <div class="col-4 text-muted">账号ID:</div>
                    <div class="col-8" id="detailCookieId">-</div>
                  </div>
                  <div class="row mb-2">
                    <div class="col-4 text-muted">买家ID:</div>
                    <div class="col-8" id="detailBuyerId">-</div>
                  </div>
                  <div class="row mb-2">
                    <div class="col-4 text-muted">商品ID:</div>
                    <div class="col-8" id="detailItemId">-</div>
                  </div>
                  <div class="row mb-2">
                    <div class="col-4 text-muted">商品标题:</div>
                    <div class="col-8" id="detailItemTitle">-</div>
                  </div>
                  <div class="row mb-2">
                    <div class="col-4 text-muted">订单状态:</div>
                    <div class="col-8">
                      <span class="badge" id="detailOrderStatus">-</span>
                    </div>
                  </div>
                  <div class="row mb-2">
                    <div class="col-4 text-muted">规格名称:</div>
                    <div class="col-8" id="detailSpecName">-</div>
                  </div>
                  <div class="row mb-2">
                    <div class="col-4 text-muted">规格值:</div>
                    <div class="col-8" id="detailSpecValue">-</div>
                  </div>
                  <div class="row mb-2">
                    <div class="col-4 text-muted">数量:</div>
                    <div class="col-8" id="detailQuantity">-</div>
                  </div>
                  <div class="row mb-2">
                    <div class="col-4 text-muted">订单金额:</div>
                    <div class="col-8" id="detailOrderAmount">-</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-md-6">
              <div class="card">
                <div class="card-header">
                  <h6 class="mb-0">时间信息</h6>
                </div>
                <div class="card-body">
                  <div class="row mb-2">
                    <div class="col-4 text-muted">创建时间:</div>
                    <div class="col-8" id="detailCreatedAt">-</div>
                  </div>
                  <div class="row mb-2">
                    <div class="col-4 text-muted">更新时间:</div>
                    <div class="col-8" id="detailUpdatedAt">-</div>
                  </div>
                  <div class="row mb-2">
                    <div class="col-4 text-muted">付款时间:</div>
                    <div class="col-8" id="detailPaymentTime">-</div>
                  </div>
                  <div class="row mb-2">
                    <div class="col-4 text-muted">发货时间:</div>
                    <div class="col-8" id="detailShippingTime">-</div>
                  </div>
                  <div class="row mb-2">
                    <div class="col-4 text-muted">收货时间:</div>
                    <div class="col-8" id="detailDeliveryTime">-</div>
                  </div>
                  <div class="row mb-2">
                    <div class="col-4 text-muted">退款时间:</div>
                    <div class="col-8" id="detailRefundTime">-</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="row mt-3">
            <div class="col-12">
              <div class="card">
                <div class="card-header">
                  <h6 class="mb-0">消息信息</h6>
                </div>
                <div class="card-body">
                  <div class="mb-3">
                    <label class="form-label">买家留言:</label>
                    <div class="border rounded p-2 bg-light" id="detailBuyerMessage">-</div>
                  </div>
                  <div class="mb-3">
                    <label class="form-label">卖家回复:</label>
                    <div class="border rounded p-2 bg-light" id="detailSellerMessage">-</div>
                  </div>
                  <div class="mb-3">
                    <label class="form-label">物流信息:</label>
                    <div class="border rounded p-2 bg-light" id="detailShippingInfo">-</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
          <button type="button" class="btn btn-primary" onclick="editOrder()">编辑订单</button>
        </div>
      </div>
    </div>
  </div>

  <!-- 编辑订单模态框 -->
  <div class="modal fade" id="editOrderModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">
            <i class="bi bi-pencil me-2"></i>编辑订单
          </h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
          <form id="editOrderForm">
            <input type="hidden" id="editOrderId">
            <input type="hidden" id="editOrderCookieId">
            
            <div class="row">
              <div class="col-md-6">
                <div class="mb-3">
                  <label for="editOrderBuyerId" class="form-label">买家ID</label>
                  <input type="text" class="form-control" id="editOrderBuyerId" readonly>
                </div>
              </div>
              <div class="col-md-6">
                <div class="mb-3">
                  <label for="editOrderItemId" class="form-label">商品ID</label>
                  <input type="text" class="form-control" id="editOrderItemId">
                </div>
              </div>
            </div>
            
            <div class="mb-3">
              <label for="editOrderItemTitle" class="form-label">商品标题</label>
              <input type="text" class="form-control" id="editOrderItemTitle">
            </div>
            
            <div class="row">
              <div class="col-md-6">
                <div class="mb-3">
                  <label for="editOrderStatus" class="form-label">订单状态</label>
                  <select class="form-select" id="editOrderStatus">
                    <option value="待付款">待付款</option>
                    <option value="待发货">待发货</option>
                    <option value="已发货">已发货</option>
                    <option value="已完成">已完成</option>
                    <option value="退款中">退款中</option>
                    <option value="已退款">已退款</option>
                    <option value="已取消">已取消</option>
                  </select>
                </div>
              </div>
              <div class="col-md-6">
                <div class="mb-3">
                  <label for="editOrderAmount" class="form-label">订单金额</label>
                  <input type="number" class="form-control" id="editOrderAmount" step="0.01" min="0">
                </div>
              </div>
            </div>
            
            <div class="mb-3">
              <label for="editOrderBuyerMessage" class="form-label">买家留言</label>
              <textarea class="form-control" id="editOrderBuyerMessage" rows="3"></textarea>
            </div>
            
            <div class="mb-3">
              <label for="editOrderSellerMessage" class="form-label">卖家回复</label>
              <textarea class="form-control" id="editOrderSellerMessage" rows="3"></textarea>
            </div>
            
            <div class="mb-3">
              <label for="editOrderShippingInfo" class="form-label">物流信息</label>
              <textarea class="form-control" id="editOrderShippingInfo" rows="2"></textarea>
            </div>
            
            <div class="row">
              <div class="col-md-6">
                <div class="mb-3">
                  <label for="editOrderPaymentTime" class="form-label">付款时间</label>
                  <input type="datetime-local" class="form-control" id="editOrderPaymentTime">
                </div>
              </div>
              <div class="col-md-6">
                <div class="mb-3">
                  <label for="editOrderShippingTime" class="form-label">发货时间</label>
                  <input type="datetime-local" class="form-control" id="editOrderShippingTime">
                </div>
              </div>
            </div>
            
            <div class="row">
              <div class="col-md-6">
                <div class="mb-3">
                  <label for="editOrderDeliveryTime" class="form-label">收货时间</label>
                  <input type="datetime-local" class="form-control" id="editOrderDeliveryTime">
                </div>
              </div>
              <div class="col-md-6">
                <div class="mb-3">
                  <label for="editOrderRefundTime" class="form-label">退款时间</label>
                  <input type="datetime-local" class="form-control" id="editOrderRefundTime">
                </div>
              </div>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
          <button type="button" class="btn btn-primary" onclick="saveOrderChanges()">保存修改</button>
        </div>
      </div>
    </div>
  </div>

  <!-- 手动添加订单模态框 -->
  <div class="modal fade" id="addOrderModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">
            <i class="bi bi-plus-circle me-2"></i>手动添加订单
          </h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
          <form id="addOrderForm">
            <div class="row">
              <div class="col-md-6">
                <div class="mb-3">
                  <label for="addOrderCookieId" class="form-label">账号ID <span class="text-danger">*</span></label>
                  <select class="form-select" id="addOrderCookieId" required>
                    <option value="">请选择账号</option>
                  </select>
                </div>
              </div>
              <div class="col-md-6">
                <div class="mb-3">
                  <label for="addOrderId" class="form-label">订单号 <span class="text-danger">*</span></label>
                  <input type="text" class="form-control" id="addOrderId" required>
                </div>
              </div>
            </div>
            
            <div class="row">
              <div class="col-md-6">
                <div class="mb-3">
                  <label for="addOrderBuyerId" class="form-label">买家ID <span class="text-danger">*</span></label>
                  <input type="text" class="form-control" id="addOrderBuyerId" required>
                </div>
              </div>
              <div class="col-md-6">
                <div class="mb-3">
                  <label for="addOrderItemId" class="form-label">商品ID</label>
                  <input type="text" class="form-control" id="addOrderItemId">
                </div>
              </div>
            </div>
            
            <div class="mb-3">
              <label for="addOrderItemTitle" class="form-label">商品标题</label>
              <input type="text" class="form-control" id="addOrderItemTitle">
            </div>
            
            <div class="row">
              <div class="col-md-6">
                <div class="mb-3">
                  <label for="addOrderStatus" class="form-label">订单状态 <span class="text-danger">*</span></label>
                  <select class="form-select" id="addOrderStatus" required>
                    <option value="">请选择状态</option>
                    <option value="待付款">待付款</option>
                    <option value="待发货">待发货</option>
                    <option value="已发货">已发货</option>
                    <option value="已完成">已完成</option>
                    <option value="退款中">退款中</option>
                    <option value="已退款">已退款</option>
                    <option value="已取消">已取消</option>
                  </select>
                </div>
              </div>
              <div class="col-md-6">
                <div class="mb-3">
                  <label for="addOrderAmount" class="form-label">订单金额</label>
                  <input type="number" class="form-control" id="addOrderAmount" step="0.01" min="0">
                </div>
              </div>
            </div>
            
            <div class="mb-3">
              <label for="addOrderBuyerMessage" class="form-label">买家留言</label>
              <textarea class="form-control" id="addOrderBuyerMessage" rows="3"></textarea>
            </div>
            
            <div class="mb-3">
              <label for="addOrderSellerMessage" class="form-label">卖家回复</label>
              <textarea class="form-control" id="addOrderSellerMessage" rows="3"></textarea>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
          <button type="button" class="btn btn-primary" onclick="saveNewOrder()">添加订单</button>
        </div>
      </div>
    </div>
  </div>

  <!-- 默认回复管理模态框 -->
  <div class="modal fade" id="defaultReplyModal" tabindex="-1" aria-labelledby="defaultReplyModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="defaultReplyModalLabel">
            <i class="bi bi-chat-text me-2"></i>默认回复管理
          </h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div class="alert alert-info">
            <i class="bi bi-info-circle me-2"></i>
            <strong>功能说明：</strong>当没有匹配到关键词时，系统会使用默认回复。支持以下变量：
            <code>{send_user_name}</code> 用户昵称、
            <code>{send_user_id}</code> 用户ID、
            <code>{send_message}</code> 用户消息
            <br><br>
            <strong>只回复一次：</strong>开启后，每个对话只会触发一次默认回复，避免重复回复同一用户。
          </div>

          <div class="table-responsive">
            <table class="table table-hover" id="defaultReplyTable">
              <thead>
                <tr>
                  <th style="width: 15%">账号ID</th>
                  <th style="width: 12%">状态</th>
                  <th style="width: 12%">只回复一次</th>
                  <th style="width: 41%">默认回复内容</th>
                  <th style="width: 20%">操作</th>
                </tr>
              </thead>
              <tbody id="defaultReplyTableBody">
                <!-- 动态生成 -->
              </tbody>
            </table>
          </div>
        </div>
        <div class="modal-footer">
          <div class="text-muted me-auto">
            <small><i class="bi bi-info-circle me-1"></i>请点击每个账号的"编辑"按钮进行单独设置</small>
          </div>
          <button type="button" class="btn btn-primary" data-bs-dismiss="modal">
            <i class="bi bi-check-circle me-1"></i>完成
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- 编辑默认回复模态框 -->
  <div class="modal fade" id="editDefaultReplyModal" tabindex="-1" aria-labelledby="editDefaultReplyModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="editDefaultReplyModalLabel">
            <i class="bi bi-pencil-square me-2"></i>编辑默认回复
          </h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <form id="editDefaultReplyForm">
            <input type="hidden" id="editAccountId" />

            <div class="mb-3">
              <label class="form-label">账号ID</label>
              <input type="text" class="form-control" id="editAccountIdDisplay" readonly />
            </div>

            <div class="mb-3">
              <div class="form-check form-switch">
                <input class="form-check-input" type="checkbox" id="editDefaultReplyEnabled" onchange="toggleReplyContentVisibility()" />
                <label class="form-check-label" for="editDefaultReplyEnabled">
                  启用默认回复
                </label>
              </div>
            </div>

            <div class="mb-3">
              <div class="form-check form-switch">
                <input class="form-check-input" type="checkbox" id="editReplyOnce" />
                <label class="form-check-label" for="editReplyOnce">
                  只回复一次
                </label>
                <div class="form-text">
                  <i class="bi bi-info-circle me-1"></i>
                  开启后，每个对话只会触发一次默认回复，避免重复回复
                </div>
              </div>
            </div>

            <div class="mb-3" id="editReplyContentGroup">
              <label for="editReplyContent" class="form-label">默认回复内容</label>
              <textarea class="form-control" id="editReplyContent" rows="4"
                placeholder="请输入默认回复内容，支持变量：{send_user_name} {send_user_id} {send_message}"></textarea>
              <div class="form-text">
                <strong>可用变量：</strong>
                <span class="badge bg-secondary me-1">{send_user_name}</span>
                <span class="badge bg-secondary me-1">{send_user_id}</span>
                <span class="badge bg-secondary me-1">{send_message}</span>
              </div>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
          <button type="button" class="btn btn-primary" onclick="saveDefaultReply()">
            <i class="bi bi-check-circle me-1"></i>保存
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- 编辑商品详情模态框 -->
  <div class="modal fade" id="editItemModal" tabindex="-1">
    <div class="modal-dialog modal-xl">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">
            <i class="bi bi-pencil me-2"></i>编辑商品详情
          </h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
          <form id="editItemForm">
            <input type="hidden" id="editItemCookieId">
            <input type="hidden" id="editItemId">

            <div class="row mb-3">
              <div class="col-md-6">
                <label class="form-label">账号ID</label>
                <input type="text" class="form-control" id="editItemCookieIdDisplay" readonly>
              </div>
              <div class="col-md-6">
                <label class="form-label">商品ID</label>
                <input type="text" class="form-control" id="editItemIdDisplay" readonly>
              </div>
            </div>

            <div class="mb-3">
              <label for="editItemDetail" class="form-label">商品详情 <span class="text-danger">*</span></label>
              <textarea class="form-control" id="editItemDetail" rows="20"
                        placeholder="请输入商品详情内容..."></textarea>
              <div class="form-text">
                <i class="bi bi-info-circle me-1"></i>
                请输入商品详情内容，这些内容将用于自动发货时的关键词匹配。
              </div>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
          <button type="button" class="btn btn-primary" onclick="saveItemDetail()">
            <i class="bi bi-check-circle me-1"></i>保存
          </button>
        </div>
      </div>
    </div>
  </div>

  

  <!-- AI回复配置模态框 -->
  <div class="modal fade" id="aiReplyConfigModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">
            <i class="bi bi-robot me-2"></i>AI回复配置
          </h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
          <form id="aiReplyConfigForm">
            <input type="hidden" id="aiConfigAccountId">

            <!-- 基本设置 -->
            <div class="card mb-3">
              <div class="card-header">
                <h6 class="mb-0"><i class="bi bi-gear me-2"></i>基本设置</h6>
              </div>
              <div class="card-body">
                <div class="row mb-3">
                  <div class="col-md-6">
                    <label class="form-label">账号ID</label>
                    <input type="text" class="form-control" id="aiConfigAccountIdDisplay" readonly>
                  </div>
                  <div class="col-md-6">
                    <div class="form-check form-switch mt-4">
                      <input class="form-check-input" type="checkbox" id="aiReplyEnabled"
                        onchange="toggleAIReplySettings()">
                      <label class="form-check-label" for="aiReplyEnabled">
                        <strong>启用AI回复</strong>
                      </label>
                      <small class="form-text text-muted d-block">启用后将自动禁用关键词匹配和默认回复</small>
                    </div>
                  </div>
                </div>

                <div id="aiReplySettings" style="display: none;">
                  <div class="row mb-3">
                    <div class="col-md-6">
                      <label for="aiModelName" class="form-label"></label>AI模型</label>
                      <select class="form-select" id="aiModelName" onchange="toggleCustomModelInput()">
                        <option value="qwen-plus">通义千问Plus</option>
                        <option value="qwen-turbo">通义千问Turbo</option>
                        <option value="qwen-max">通义千问Max</option>
                        <option value="gpt-3.5-turbo">GPT-3.5 Turbo</option>
                        <option value="gpt-4">GPT-4</option>
                        <option value="custom">自定义模型</option>
                      </select>
                      <input type="text" class="form-control mt-2" id="customModelName" placeholder="请输入自定义模型名称"
                        style="display: none;">
                    </div>
                    <div class="col-md-6">
                      <label for="aiBaseUrl" class="form-label">API地址</label>
                      <input type="url" class="form-control" id="aiBaseUrl"
                        value="https://dashscope.aliyuncs.com/compatible-mode/v1" placeholder="API Base URL">
                    </div>
                  </div>

                  <div class="mb-3">
                    <label for="aiApiKey" class="form-label">API密钥 <span class="text-danger">*</span></label>
                    <input type="password" class="form-control" id="aiApiKey" placeholder="请输入API密钥" required>
                    <small class="form-text text-muted">
                      通义千问请使用DashScope API Key，GPT请使用OpenAI API Key
                    </small>
                  </div>
                </div>
              </div>
            </div>

            <!-- 议价设置 -->
            <div class="card mb-3" id="bargainSettings" style="display: none;">
              <div class="card-header">
                <h6 class="mb-0"><i class="bi bi-currency-dollar me-2"></i>议价设置</h6>
              </div>
              <div class="card-body">
                <div class="row mb-3">
                  <div class="col-md-4">
                    <label for="maxDiscountPercent" class="form-label">最大优惠百分比</label>
                    <div class="input-group">
                      <input type="number" class="form-control" id="maxDiscountPercent"
                             min="0" max="50" value="10">
                      <span class="input-group-text">%</span>
                    </div>
                  </div>
                  <div class="col-md-4">
                    <label for="maxDiscountAmount" class="form-label">最大优惠金额</label>
                    <div class="input-group">
                      <input type="number" class="form-control" id="maxDiscountAmount"
                             min="0" value="100">
                      <span class="input-group-text">元</span>
                    </div>
                  </div>
                  <div class="col-md-4">
                    <label for="maxBargainRounds" class="form-label">最大议价轮数</label>
                    <input type="number" class="form-control" id="maxBargainRounds"
                           min="1" max="10" value="3">
                  </div>
                </div>
              </div>
            </div>

            <!-- 提示词设置 -->
            <div class="card mb-3" id="promptSettings" style="display: none;">
              <div class="card-header">
                <h6 class="mb-0"><i class="bi bi-chat-quote me-2"></i>提示词设置</h6>
              </div>
              <div class="card-body">
                <div class="mb-3">
                  <label class="form-label">自定义提示词 (JSON格式)</label>
                  <textarea class="form-control" id="customPrompts" rows="8"
                            placeholder='{"classify": "分类提示词", "price": "议价提示词", "tech": "技术提示词", "default": "默认提示词"}'></textarea>
                  <small class="form-text text-muted">
                    留空使用系统默认提示词。格式：{"classify": "...", "price": "...", "tech": "...", "default": "..."}
                  </small>
                </div>
              </div>
            </div>

            <!-- 测试区域 -->
            <div class="card" id="testArea" style="display: none;">
              <div class="card-header">
                <h6 class="mb-0"><i class="bi bi-play-circle me-2"></i>功能测试</h6>
              </div>
              <div class="card-body">
                <div class="row mb-3">
                  <div class="col-md-6">
                    <label for="testMessage" class="form-label">测试消息</label>
                    <input type="text" class="form-control" id="testMessage"
                           value="你好，这个商品能便宜点吗？" placeholder="输入测试消息">
                  </div>
                  <div class="col-md-6">
                    <label for="testItemPrice" class="form-label">商品价格</label>
                    <input type="number" class="form-control" id="testItemPrice"
                           value="100" placeholder="商品价格">
                  </div>
                </div>
                <button type="button" class="btn btn-outline-primary" onclick="testAIReply()">
                  <i class="bi bi-play me-1"></i>测试AI回复
                </button>
                <div id="testResult" class="mt-3" style="display: none;">
                  <div class="alert alert-info">
                    <strong>AI回复：</strong>
                    <div id="testReplyContent"></div>
                  </div>
                </div>
              </div>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
          <button type="button" class="btn btn-primary" onclick="saveAIReplyConfig()">
            <i class="bi bi-check-lg me-1"></i>保存配置
          </button>
        </div>
      </div>
    </div>
  </div>





  <!-- 创建门店词库模态框 -->
  <div class="modal fade" id="createLibraryModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">
            <i class="bi bi-collection me-2"></i>创建门店词库
          </h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
          <form id="createLibraryForm">
            <div class="mb-3">
              <label class="form-label">库名称 <span class="text-danger">*</span></label>
              <input type="text" class="form-control" id="libraryName" placeholder="例如：门店词库、客服话术库" required>
              <div class="form-text">门店词库的名称，用于区分不同的关键词集合</div>
            </div>
            <div class="mb-3">
              <label class="form-label">描述（可选）</label>
              <textarea class="form-control" id="libraryDescription" rows="3" placeholder="描述这个门店词库的用途和内容"></textarea>
              <div class="form-text">可选描述，帮助识别门店词库的用途</div>
            </div>
            <div class="mb-3">
              <label class="form-label">创建方式 <span class="text-danger">*</span></label>
              <div class="form-check">
                <input class="form-check-input" type="radio" name="createMethod" id="createMethodExcel" value="excel" checked>
                <label class="form-check-label" for="createMethodExcel">
                  <i class="bi bi-file-earmark-excel me-1"></i>xlsx文件导入
                </label>
              </div>
              <div class="form-check">
                <input class="form-check-input" type="radio" name="createMethod" id="createMethodCrawler" value="crawler">
                <label class="form-check-label" for="createMethodCrawler">
                  <i class="bi bi-globe me-1"></i>爬虫抓取
                </label>
              </div>
            </div>
            
            <!-- Excel文件导入选项 -->
            <div id="excelUploadSection" class="mb-3">
              <div class="alert alert-info">
                <h6><i class="bi bi-file-earmark-excel me-1"></i>Excel文件格式要求：</h6>
                <ul class="mb-0 small">
                  <li><strong>第一列：</strong>门店名称（包含括号内的关键词，如：XXX专卖店（朝阳店））</li>
                  <li><strong>第二列：</strong>城市名称（如：北京、上海）</li>
                  <li><strong>文件格式：</strong>支持.xlsx和.xls格式</li>
                  <li><strong>生成逻辑：</strong>从门店名称括号内提取关键词，按城市分组生成回复</li>
                </ul>
              </div>
              <label class="form-label">选择Excel文件 <span class="text-danger">*</span></label>
              <input type="file" class="form-control" id="libraryFileInput" accept=".xlsx,.xls">
              <div class="form-text">
                <i class="bi bi-info-circle me-1"></i>
                请上传包含门店信息的Excel文件
              </div>
            </div>
            
            <!-- 爬虫抓取选项 -->
            <div id="crawlerSection" class="mb-3" style="display: none;">
              <div class="alert alert-info">
                <h6><i class="bi bi-info-circle me-1"></i>爬虫抓取说明：</h6>
                <ul class="mb-0 small">
                  <li>系统将自动抓取美团门店信息</li>
                  <li>从门店名称中提取关键词（括号内内容）</li>
                  <li>按城市分组生成回复内容</li>
                  <li>抓取过程可能需要几分钟时间，请耐心等待</li>
                </ul>
              </div>
              <div class="mb-3">
                <label class="form-label">SKU ID <span class="text-danger">*</span></label>
                <input type="text" class="form-control" id="crawlerSkuId" placeholder="请输入美团SKU ID">
                <div class="form-text">美团商品的SKU ID，用于抓取门店信息</div>
              </div>
              <div class="mb-3">
                <label class="form-label">MT Token <span class="text-danger">*</span></label>
                <input type="text" class="form-control" id="crawlerMtToken" placeholder="请输入美团Token">
                <div class="form-text">美团API访问Token，用于认证请求</div>
              </div>
            </div>
          </form>
          
          <!-- 异步任务进度显示 -->
          <div id="createLibraryProgress" style="display: none;" class="mt-3">
            <div class="alert alert-info" style="border: none; box-shadow: none; background: rgba(13, 202, 240, 0.1);">
              <div class="d-flex align-items-center mb-2">
                <div class="spinner-border spinner-border-sm me-2" role="status" style="animation-duration: 1.5s;"></div>
                <strong id="progressTitle">处理中...</strong>
              </div>
              <div class="progress mb-2" style="height: 8px; background-color: rgba(0,0,0,0.1);">
                <div class="progress-bar progress-bar-striped" role="progressbar" 
                     id="progressBar" style="width: 0%; transition: width 0.8s ease-out; animation: none;"></div>
              </div>
              <small class="text-muted" id="progressMessage" style="opacity: 0.8;">正在初始化...</small>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
          <button type="button" class="btn btn-success" onclick="createKeywordLibrary()" id="createLibraryModalBtn">
            <i class="bi bi-plus-lg me-1"></i>创建词库
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- 门店词库详情模态框 -->
  <div class="modal fade" id="libraryDetailModal" tabindex="-1">
    <div class="modal-dialog modal-xl">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">
            <i class="bi bi-collection me-2"></i>门店词库详情
          </h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
          <div class="row">
            <div class="col-md-8">
              <div class="card">
                <div class="card-header">
                  <h6 class="mb-0">关键词列表</h6>
                </div>
                <div class="card-body">
                  <div class="table-responsive">
                    <table class="table table-hover">
                      <thead>
                        <tr>
                          <th>关键词</th>
                          <th>回复内容</th>
                          <th>类型</th>
                        </tr>
                      </thead>
                      <tbody id="libraryKeywordsTableBody">
                        <!-- 动态生成 -->
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-md-4">
              <div class="card">
                <div class="card-header">
                  <h6 class="mb-0">应用设置</h6>
                </div>
                <div class="card-body">
                  <div class="mb-3">
                    <label class="form-label">选择目标账号</label>
                    <select class="form-select" id="targetAccountSelect">
                      <option value="">请选择要应用的账号</option>
                    </select>
                  </div>
                  <div class="mb-3">
                    <label class="form-label">商品ID <span class="text-danger">*</span></label>
                    <input type="text" class="form-control" id="targetItemIdInput" placeholder="请输入商品ID" required>
                    <div class="form-text">关键词将应用到指定的商品ID</div>
                  </div>
                  <div class="mb-3">
                    <div class="form-check">
                      <input class="form-check-input" type="checkbox" id="skipDuplicates" checked>
                      <label class="form-check-label" for="skipDuplicates">
                        跳过重复关键词
                      </label>
                    </div>
                  </div>
                  <button class="btn btn-primary w-100" onclick="applyKeywordLibrary()">
                    <i class="bi bi-share me-1"></i>应用到账号
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
        </div>
      </div>
    </div>
  </div>

  <!-- 添加图片关键词模态框 -->
  <div class="modal fade" id="addImageKeywordModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">
            <i class="bi bi-image me-2"></i>添加图片关键词
          </h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
          <form id="addImageKeywordForm">
            <div class="row">
              <div class="col-md-6">
                <div class="mb-3">
                  <label class="form-label">关键词 <span class="text-danger">*</span></label>
                  <input type="text" class="form-control" id="imageKeyword" placeholder="例如：图片、照片" required>
                  <div class="form-text">用户发送此关键词时将回复图片</div>
                </div>
                <div class="mb-3">
                  <label class="form-label">关联商品（可选）</label>
                  <select class="form-select" id="imageItemIdSelect">
                    <option value="">选择商品或留空表示通用关键词</option>
                  </select>
                  <div class="form-text">选择特定商品时，仅在该商品对话中生效</div>
                </div>
              </div>
              <div class="col-md-6">
                <div class="mb-3">
                  <label class="form-label">上传图片 <span class="text-danger">*</span></label>
                  <input type="file" class="form-control" id="imageFile" accept="image/*" required>
                  <div class="form-text">支持 JPG、PNG、GIF 格式，建议大小不超过 5MB</div>
                </div>
                <div class="mb-3">
                  <div class="image-preview" id="imagePreview" style="display: none;">
                    <label class="form-label">图片预览</label>
                    <div class="preview-container">
                      <img id="previewImg" src="" alt="预览图片" style="max-width: 100%; max-height: 200px; border-radius: 8px; border: 1px solid #ddd;">
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="alert alert-info">
              <i class="bi bi-info-circle me-2"></i>
              <strong>说明：</strong>
              <ul class="mb-0 mt-2">
                <li>图片关键词优先级高于文本关键词</li>
                <li>用户发送匹配的关键词时，系统将回复上传的图片</li>
                <li>图片将被转换为适合聊天的格式</li>
              </ul>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
          <button type="button" class="btn btn-primary" onclick="addImageKeyword()">
            <i class="bi bi-plus-lg me-1"></i>添加图片关键词
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- 通用关键词编辑模态框 -->
  <div class="modal fade" id="editGlobalKeywordModal" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">编辑通用关键词</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
          <form id="editGlobalKeywordForm">
            <input type="hidden" id="editGlobalKeywordId">
            <div class="mb-3">
              <label class="form-label">
                关键词 <span class="text-danger">*</span>
                <button type="button" class="btn btn-link btn-sm p-0 ms-1" data-bs-toggle="modal" data-bs-target="#keywordHelpModal">
                  <i class="bi bi-question-circle"></i>
                </button>
              </label>
              <input type="text" class="form-control" id="editGlobalKeywordInput" placeholder="例如：你好 或 今天{*}位能用吗" required>
            </div>
            <div class="mb-3">
              <label class="form-label">自动回复内容 <span class="text-danger">*</span></label>
              <textarea class="form-control" id="editGlobalReplyInput" rows="3" required></textarea>
            </div>
            <div class="mb-3">
              <label class="form-label">类型</label>
              <select class="form-select" id="editGlobalKeywordType">
                <option value="text">文本</option>
                <option value="image">图片</option>
              </select>
            </div>
            <div class="mb-3" id="editGlobalImageUrlGroup" style="display: none;">
              <label class="form-label">图片URL</label>
              <input type="text" class="form-control" id="editGlobalImageUrlInput">
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
          <button type="button" class="btn btn-primary" onclick="updateGlobalKeyword()">保存</button>
        </div>
      </div>
    </div>
  </div>

  <!-- 通用关键词批量导入模态框 -->
  <div class="modal fade" id="globalKeywordImportModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">批量导入通用关键词</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
          <div class="alert alert-info">
            <i class="bi bi-info-circle me-2"></i>
            <strong>导入格式说明：</strong>每行一个关键词，格式为：关键词|回复内容
            <br>例如：你好|您好，欢迎咨询！
          </div>
          <div class="mb-3">
            <label class="form-label">关键词数据</label>
            <textarea class="form-control" id="globalKeywordImportData" rows="10"
              placeholder="你好|您好，欢迎咨询！&#10;价格|请问您需要什么价位的商品？&#10;发货|我们会在24小时内发货"></textarea>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
          <button type="button" class="btn btn-primary" onclick="importGlobalKeywords()">导入</button>
        </div>
      </div>
    </div>
  </div>

  <!-- 通用关键词Excel批量导入模态框 -->
  <div class="modal fade" id="globalKeywordExcelImportModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Excel批量导入通用关键词</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
          <div class="alert alert-info">
            <i class="bi bi-info-circle me-2"></i>
            <strong>Excel格式说明：</strong>
            <ul class="mb-0 mt-2">
              <li>支持 .xlsx 格式的Excel文件</li>
              <li>第一列：关键词</li>
              <li>第二列：自动回复内容</li>
              <li>从第一行开始读取数据（无需表头）</li>
              <li>空行将被自动跳过</li>
            </ul>
          </div>

          <div class="mb-3">
            <label class="form-label">选择Excel文件</label>
            <input type="file" class="form-control" id="globalKeywordExcelFile" accept=".xlsx,.xls" onchange="handleGlobalKeywordExcelFile(this)">
            <div class="form-text">请选择包含关键词数据的Excel文件</div>
          </div>

          <div id="globalKeywordExcelPreview" style="display: none;">
            <div class="mb-3">
              <label class="form-label">数据预览</label>
              <div class="table-responsive" style="max-height: 300px;">
                <table class="table table-sm table-bordered">
                  <thead>
                    <tr>
                      <th style="width: 40%">关键词</th>
                      <th style="width: 60%">回复内容</th>
                    </tr>
                  </thead>
                  <tbody id="globalKeywordExcelPreviewBody">
                  </tbody>
                </table>
              </div>
              <div class="text-muted small">
                <span id="globalKeywordExcelCount">0</span> 条有效数据
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
          <button type="button" class="btn btn-primary" id="globalKeywordExcelImportBtn" onclick="importGlobalKeywordsFromExcel()" disabled>导入</button>
        </div>
      </div>
    </div>
  </div>

  <!-- 商品专属回复语模态框 -->
  <div class="modal fade" id="itemExclusiveReplyModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">
            <i class="bi bi-chat-heart me-2"></i>设置专属回复语
          </h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
          <div class="alert alert-info">
            <i class="bi bi-info-circle me-2"></i>
            <strong>专属回复语说明：</strong>此回复语会在每个对话中第一次回复时触发，每个对话只回复一次此内容，且不影响其他关键词匹配规则。
          </div>

          <form id="itemExclusiveReplyForm">
            <div class="mb-3">
              <label for="exclusiveReplyItemId" class="form-label">商品ID</label>
              <input type="text" class="form-control" id="exclusiveReplyItemId" readonly>
            </div>

            <div class="mb-3">
              <label for="exclusiveReplyContent" class="form-label">专属回复内容</label>
              <textarea class="form-control" id="exclusiveReplyContent" rows="4"
                        placeholder="请输入专属回复内容，支持变量：{send_user_name} 用户昵称、{send_user_id} 用户ID、{send_message} 用户消息"></textarea>
              <div class="form-text">
                <i class="bi bi-lightbulb me-1"></i>
                <strong>支持变量：</strong>
                <code>{send_user_name}</code> 用户昵称，
                <code>{send_user_id}</code> 用户ID，
                <code>{send_message}</code> 用户消息
              </div>
            </div>

            <div class="mb-3">
              <div class="form-check">
                <input class="form-check-input" type="checkbox" id="exclusiveReplyEnabled" checked>
                <label class="form-check-label" for="exclusiveReplyEnabled">
                  启用专属回复语
                </label>
              </div>
            </div>
          </form>

          <!-- 现有专属回复语显示 -->
          <div id="currentExclusiveReply" style="display: none;">
            <hr>
            <h6>当前专属回复语</h6>
            <div class="card">
              <div class="card-body">
                <div class="d-flex justify-content-between align-items-start">
                  <div>
                    <p class="mb-1" id="currentExclusiveReplyContent"></p>
                    <small class="text-muted">
                      状态: <span id="currentExclusiveReplyStatus"></span> |
                      更新时间: <span id="currentExclusiveReplyTime"></span>
                    </small>
                  </div>
                  <button type="button" class="btn btn-sm btn-outline-danger" onclick="deleteItemExclusiveReply()">
                    <i class="bi bi-trash"></i> 删除
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
          <button type="button" class="btn btn-primary" onclick="saveItemExclusiveReply()">保存</button>
        </div>
      </div>
    </div>
  </div>

  <!-- 聚合豆消费记录模态框 -->
  <div class="modal fade" id="balanceRecordsModal" tabindex="-1">
    <div class="modal-dialog modal-xl">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">
            <i class="bi bi-coin me-2"></i>聚合豆消费记录
          </h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
          <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
              <span>消费记录列表</span>
              <div class="d-flex align-items-center gap-2">
                <span class="badge bg-primary" id="balanceRecordCount">0 条记录</span>
                <button class="btn btn-sm btn-outline-primary" onclick="refreshBalanceRecords()">
                  <i class="bi bi-arrow-clockwise me-1"></i>刷新
                </button>
              </div>
            </div>
            <div class="card-body">
              <div class="table-responsive">
                <table class="table table-hover">
                  <thead>
                    <tr>
                      <th style="width: 20%">订单号</th>
                      <th style="width: 15%">变动金额</th>
                      <th style="width: 15%">操作后余额</th>
                      <th style="width: 12%">记录类型</th>
                      <th style="width: 25%">描述</th>
                      <th style="width: 13%">时间</th>
                    </tr>
                  </thead>
                  <tbody id="balanceRecordsTableBody">
                    <tr>
                      <td colspan="6" class="text-center text-muted py-4">暂无消费记录</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
            <!-- 分页控件 -->
            <div class="card-footer" id="balanceRecordsPagination">
              <div class="d-flex justify-content-between align-items-center">
                <div class="text-muted small">
                  <span id="balanceRecordsPageInfo">显示第 1-20 条，共 0 条记录</span>
                </div>
                <div class="d-flex align-items-center gap-2">
                  <div class="btn-group" role="group">
                    <button type="button" class="btn btn-outline-secondary btn-sm" id="balanceRecordsFirstPage" onclick="goToBalanceRecordsPage(1)" disabled>
                      <i class="bi bi-chevron-double-left"></i>
                    </button>
                    <button type="button" class="btn btn-outline-secondary btn-sm" id="balanceRecordsPrevPage" onclick="goToBalanceRecordsPage(currentBalanceRecordsPage - 1)" disabled>
                      <i class="bi bi-chevron-left"></i>
                    </button>
                  </div>

                  <div class="d-flex align-items-center gap-2 mx-2">
                    <span class="text-muted small">第</span>
                    <input type="number" class="form-control form-control-sm" id="balanceRecordsPageInput"
                           style="width: 60px;" min="1" value="1">
                    <span class="text-muted small">页，共 <span id="balanceRecordsTotalPages">0</span> 页</span>
                  </div>

                  <div class="btn-group" role="group">
                    <button type="button" class="btn btn-outline-secondary btn-sm" id="balanceRecordsNextPage" onclick="goToBalanceRecordsPage(currentBalanceRecordsPage + 1)" disabled>
                      <i class="bi bi-chevron-right"></i>
                    </button>
                    <button type="button" class="btn btn-outline-secondary btn-sm" id="balanceRecordsLastPage" onclick="goToBalanceRecordsPage(totalBalanceRecordsPages)" disabled>
                      <i class="bi bi-chevron-double-right"></i>
                    </button>
                  </div>

                  <select class="form-select form-select-sm ms-2" id="balanceRecordsPageSize" style="width: auto;" onchange="loadBalanceRecords()">
                    <option value="10">10条/页</option>
                    <option value="20" selected>20条/页</option>
                    <option value="50">50条/页</option>
                  </select>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
        </div>
      </div>
    </div>
  </div>

  <!-- 关键词帮助模态框 -->
  <div class="modal fade" id="keywordHelpModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">
            <i class="bi bi-question-circle me-2"></i>关键词使用帮助
          </h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
          <div class="card mb-3">
            <div class="card-header">
              <h6 class="mb-0"><i class="bi bi-info-circle me-2"></i>关键词类型</h6>
            </div>
            <div class="card-body">
              <div class="row">
                <div class="col-md-6">
                  <h6><i class="bi bi-check-circle text-success me-1"></i>精确匹配</h6>
                  <p class="text-muted">直接输入关键词，只匹配完全包含该关键词的消息。</p>
                  <div class="bg-light p-3 rounded">
                    <strong>示例：</strong><br>
                    关键词：<code>包邮吗</code><br>
                    匹配：<span class="text-success">这个商品包邮吗？</span><br>
                    不匹配：<span class="text-danger">邮费多少钱？</span>
                  </div>
                </div>
                <div class="col-md-6">
                  <h6><i class="bi bi-asterisk text-warning me-1"></i>模糊匹配</h6>
                  <p class="text-muted">使用 <code>{*}</code> 作为占位符，匹配任意字符。</p>
                  <div class="bg-light p-3 rounded">
                    <strong>示例：</strong><br>
                    关键词：<code>今天{*}位能用吗</code><br>
                    匹配：<span class="text-success">今天5位能用吗？</span><br>
                    匹配：<span class="text-success">今天10位能用吗？</span>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="card mb-3">
            <div class="card-header">
              <h6 class="mb-0"><i class="bi bi-code me-2"></i>回复变量</h6>
            </div>
            <div class="card-body">
              <div class="table-responsive">
                <table class="table table-sm">
                  <thead>
                    <tr>
                      <th>变量</th>
                      <th>说明</th>
                      <th>示例值</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td><code>{send_user_name}</code></td>
                      <td>发送者昵称</td>
                      <td>小明</td>
                    </tr>
                    <tr>
                      <td><code>{send_user_id}</code></td>
                      <td>发送者ID</td>
                      <td>12345</td>
                    </tr>
                    <tr>
                      <td><code>{send_message}</code></td>
                      <td>原始消息内容</td>
                      <td>今天5位能用吗</td>
                    </tr>
                    <tr>
                      <td><code>{placeholder_1}</code></td>
                      <td>第一个占位符匹配的内容</td>
                      <td>5</td>
                    </tr>
                    <tr>
                      <td><code>{placeholder_2}</code></td>
                      <td>第二个占位符匹配的内容（如果有多个占位符）</td>
                      <td>-</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>

          <div class="card">
            <div class="card-header">
              <h6 class="mb-0"><i class="bi bi-lightbulb me-2"></i>完整示例</h6>
            </div>
            <div class="card-body">
              <div class="bg-primary bg-opacity-10 p-3 rounded">
                <strong>关键词：</strong><code>今天{*}位能用吗</code><br>
                <strong>回复：</strong><code>亲爱的{send_user_name}，关于{placeholder_1}位的问题，当然可以使用！</code><br>
                <hr>
                <strong>用户消息：</strong>今天5位能用吗？<br>
                <strong>自动回复：</strong>亲爱的小明，关于5位的问题，当然可以使用！
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">我知道了</button>
        </div>
      </div>
    </div>
  </div>

  <!-- 设置自动回复模态框 -->
  <div class="modal fade" id="autoReplyModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">
            <i class="bi bi-chat-dots me-2"></i>
            设置自动回复
          </h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
          <div class="mb-3">
            <label class="form-label">商品信息</label>
            <div class="alert alert-info">
              <strong>账号ID：</strong><span id="autoReplyAccountId"></span><br>
              <strong>商品ID：</strong><span id="autoReplyItemId"></span>
            </div>
          </div>
          
          <div class="mb-3">
            <label class="form-label">选择门店词库 <span class="text-danger">*</span></label>
            <div class="input-group">
              <input type="text" class="form-control" id="librarySearchInput" 
                     placeholder="输入词库名称进行搜索..." 
                     oninput="searchLibraries(this.value)">
              <button class="btn btn-outline-secondary" type="button" onclick="loadAllLibraries()">
                <i class="bi bi-arrow-clockwise"></i>
              </button>
            </div>
            <div class="mt-2">
              <select class="form-select" id="librarySelect" size="5">
                <option value="">请先搜索或加载词库列表</option>
              </select>
            </div>
          </div>
          
          <div class="mb-3">
            <div class="form-check">
              <input class="form-check-input" type="checkbox" id="overwriteExisting">
              <label class="form-check-label" for="overwriteExisting">
                覆盖已存在的关键词
              </label>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
          <button type="button" class="btn btn-primary" onclick="applyAutoReply()">
            <i class="bi bi-check-lg me-1"></i>确认设置
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- 设置自动发货模态框 -->
  <div class="modal fade" id="autoShippingModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">
            <i class="bi bi-truck me-2"></i>
            设置自动发货
          </h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
          <div class="mb-3">
            <label class="form-label">商品信息</label>
            <div class="alert alert-info">
              <strong>账号ID：</strong><span id="autoShippingAccountId"></span><br>
              <strong>商品ID：</strong><span id="autoShippingItemId"></span>
            </div>
          </div>
          
          <div class="mb-3">
            <label class="form-label">选择卡券 <span class="text-danger">*</span></label>
            <select class="form-select" id="cardSelect">
              <option value="">请选择卡券</option>
            </select>
          </div>
          
          <div class="mb-3">
            <label class="form-label">发货数量</label>
            <input type="number" class="form-control" id="deliveryCount" value="1" min="1" max="10">
            <div class="form-text">每次订单发货的数量（1-10）</div>
          </div>
          
          <div class="mb-3">
            <div class="form-check">
              <input class="form-check-input" type="checkbox" id="generateImage" checked>
              <label class="form-check-label" for="generateImage">
                生成发货图片
              </label>
            </div>
          </div>
          
          <div class="mb-3">
            <div class="form-check">
              <input class="form-check-input" type="checkbox" id="enableMultiSpec">
              <label class="form-check-label" for="enableMultiSpec">
                启用多规格发货
              </label>
            </div>
          </div>
          
          <!-- 多规格配置区域 -->
          <div id="multiSpecConfig" style="display: none;">
            <div class="card">
              <div class="card-header">
                <h6 class="mb-0">多规格配置</h6>
              </div>
              <div class="card-body">
                <div class="row mb-3">
                  <div class="col-md-6">
                    <label class="form-label">规格名称</label>
                    <input type="text" class="form-control" id="specName" placeholder="例如：颜色、尺寸">
                  </div>
                  <div class="col-md-6">
                    <label class="form-label">规格值</label>
                    <input type="text" class="form-control" id="specValue" placeholder="例如：红色、大号">
                  </div>
                </div>
                <div class="alert alert-info">
                  <i class="bi bi-info-circle me-2"></i>
                  <strong>多规格发货说明：</strong><br>
                  • 启用多规格后，系统会根据订单的规格信息匹配对应的发货规则<br>
                  • 规格名称和规格值必须与商品实际规格完全匹配<br>
                  • 如果找不到匹配的多规格规则，将使用普通发货规则作为兜底
                </div>
              </div>
            </div>
          </div>
          
          <div class="mb-3">
            <label class="form-label">备注说明</label>
            <textarea class="form-control" id="deliveryDescription" rows="2" 
                      placeholder="可选：添加发货规则的说明"></textarea>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
          <button type="button" class="btn btn-primary" onclick="applyAutoShipping()">
            <i class="bi bi-check-lg me-1"></i>确认设置
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- Bootstrap JS -->
  <script src="lib/bootstrap/bootstrap.bundle.min.js"></script>
  <script src="js/app.js"></script>
</body>

</html>